javascript - Facebook 评论插件仅显示在重新加载页面 reactjs

Question

我正在为我的 React 应用程序使用 Facebook 评论插件，但是当我使用 时它不显示，我必须重新加载该页面一次或两次以使其正常工作。这是我的代码

index.html

  <div id="fb-root"></div>
  <script async defer crossorigin="anonymous"
    src="https://connect.facebook.net/vi_VN/sdk.js#xfbml=1&autoLogAppEvents=1&version=v9.0&appId=3638093886307743"
    nonce="Owrtrtj1"></script>

组件js

export class FacebookComment extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        const location = window.location.href;
        return (
            <div>
                <div
                    class={"fb-comments"}
                    data-href={location}
                    data-width="100%" data-numposts="1"></div>

            </div>

        )
    }
}

Answer 1

这是我的代码，对我有用!

export function FacebookComment(props) {
    const { link, title } = props;

    React.useEffect(() => {
        if (window.FB) {
            window.FB.XFBML.parse();
        }
    },[]);

    return (
        <div className="facebookComment">
            <div className="title">{title}</div>

            <div
                className="fb-comments"
                data-href={link}
                data-width="100%"
                data-numposts="5"
            ></div>
        </div>
    );
}