React-未知的道具`page_id` <div> 标签。 从元素中移除该道具

Question

I'm integrating Facebook's Customer Chat Plugin to my website. In the instructions it says:

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

When I did so (this is the React version) :

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

... I got this error from React: Warning: Unknown prop page_id on <div> tag. Remove this prop from the element. For details, see https://reactjs.org/warnings/unknown-prop.html on <div> tag. Remove this prop from the element. For details, see https://reactjs.org/warnings/unknown-prop.html on <div> tag. Remove this prop from the element. For details, see https://reactjs.org/warnings/unknown-prop.html , and the customer chat plugin isn't shown at all (I can still find the HTML elements in the DOM tree).
I did some searching and it seems like React doesn't recognize the custom page_id attribute. I tried changing it to data-page_id but it doesn't help.
Have anyone encountered the same problem and how did you resolve it ?

Answer 1

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

Looks like page id is not supported. Try using classID or just id

Answer 2

I found out that the Customer Chat Plugin needs an HTML element inserted into the DOM with the parameters specified. With React, you're never passing in raw HTML, hence the error message. To resolve this, you can do either:
- insert the .fb-customerchat div directly to your HTML or
- use this package: https://github.com/Yoctol/react-messenger-customer-chat which is a workaround for React