FacebookのコメントReact/Node.jsのプラグインはリフレッシュ時のみ表示

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が再解析されます。 それは私のために働く。