React - <div> 标签上的未知道具`page_id`。从元素中移除这个道具答案

【问题标题】：React - Unknown prop `page_id` on <div> tag. Remove this prop from the elementReact - <div> 标签上的未知道具`page_id`。从元素中移除这个道具
【发布时间】：2018-01-08 23:46:45
【问题描述】：

我正在将 Facebook 的 Customer Chat Plugin 集成到我的网站。在说明中它说：

include a div with the following attributes in your HTML:
<div class="fb-customerchat"
 page_id="<PAGE_ID>"
 ref="<OPTIONAL_WEBHOOK_PARAM>">
</div>

当我这样做时（这是 React 版本）：

<div className="fb-customerchat"
 page_id="<PAGE_ID>"
 ref="<OPTIONAL_WEBHOOK_PARAM>">
</div>

...我从 React 收到此错误：Warning: Unknown proppage_idon <div> tag. Remove this prop from the element. For details, see https://reactjs.org/warnings/unknown-prop.html，并且根本没有显示客户聊天插件（我仍然可以在 DOM 树中找到 HTML 元素）。
我做了一些搜索，似乎 React 无法识别自定义 page_id 属性。我尝试将其更改为data-page_id，但没有帮助。
有没有人遇到过同样的问题，你是怎么解决的？

【问题讨论】：

您是否在页面中包含了 Facebook JavaScript SDK？
@xSkrappy 是的，我在浏览器控制台中检查过，FB 全局变量可用

标签： facebook reactjs facebook-customer-chat

【解决方案1】：

https://react-cn.github.io/react/docs/tags-and-attributes.html

似乎不支持页面 ID。尝试使用classID 或只使用id

【讨论】：

但是在文档 (developers.facebook.com/docs/messenger-platform/discovery/…) 中提到使用 page_id :( 然后 Facebook JS SDK 将读取此值

【解决方案2】：

我发现客户聊天插件需要一个带有指定参数的 HTML 元素插入到 DOM 中。使用 React，你永远不会传入原始 HTML，因此会出现错误消息。要解决此问题，您可以执行以下任一操作：
- 将.fb-customerchat div 直接插入您的 HTML 或
- 使用这个包：https://github.com/Yoctol/react-messenger-customer-chat 这是 React 的解决方法

【讨论】：