Question

我有一个容器，可以在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>
    );
  }
}

Answer 1

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

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

安装组件后会重新解析dom。它对我有用。

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

1 个答案: