React/Node应用程序中的Facebook评论插件.js仅在刷新时显示

Facebook Comments plugin in React/Node.js app only shows on refresh

本文关键字：js 刷新 显示 插件 评论 Node 应用程序 Facebook React      更新时间：2023-09-26

我有一个容器，可以沿着FB注释呈现一些组件。我在 React 上，看起来 facebook 评论逻辑仅适用于服务器端，因为它仅在刷新时呈现，而不是在应用程序中单击。如何让 Facebook 评论小部件显示在非引用（服务器端渲染）上？

export default class MyComponent extends Component {
  constructor() {
    super();
  }
  componentDidMount() {
    // Facebook comment SDK
    const fbSDK = (d, s, id) => {
      let js;
      const fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = '//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6&appId=xxxxxxxxxx';
      fjs.parentNode.insertBefore(js, fjs);
    };
    fbSDK(document, 'script', 'facebook-jssdk');
  }
  // some more code
  render() {
    // some more code
    return (
      // some more code
      <div className={styles.fbCommentContainer}>
        <div id="fb-root"></div>
        <div className="fb-comments" data-href={'http://www.example.com' + this.props.location.pathname}
                 data-colorscheme="dark" data-width="100%" data-numposts="2" data-order-by="reverse_time"></div>
      </div>
    );
  }
}

将此代码添加到组件所在的位置。

componentDidMount(){
   window.FB.XFBML.parse();
}

它将在挂载组件后重新解析 dom。它对我有用。

相关文章：