2017-09-10 17 views
0

パフォーマンスを向上させるためにサーバー側でレンダリングしようとしていますが、ページのコンポーネントcomponentDidMount()が呼び出されないという問題が発生しています。例えばサーバー側のComponentDidMount()レンダリング

、これは私のメインのテンプレートファイルです:

import React from 'react'; 
import Cube from './components/Cube/Cube.jsx'; 

class Index extends React.Component { 
    render() { 
    return (
      <html> 
      <head> 
       <title>{this.props.title}</title> 
      </head> 
      <body> 
       <Cube /> 
      </body> 
      </html> 
    ); 
    } 
} 

そして、私のCube.jsx:

import React from 'react'; 

class Cube extends React.Component { 
    componentDidMount() { 
     console.log("Hey!"); 
    } 

    render() { 
     return (
      <div> 
       <h1>Hello</h1> 
      </div> 
     ); 
    } 
} 

export default Cube; 

私が "おい!" を見ていませんよページが読み込まれたときに<h1>Hello</h1>が表示されているにもかかわらず、私のpm2ログやChromeのコンソールにログアウトされています。これは、私のコンポーネントのための任意の並べ替えのロジックから私を停止しています。

この問題を回避して、サブコンポーネントのcomponentDidMount()を呼び出す方法を教えてください。注意私はexpress-react-viewsをサーバーサイドレンダリングに使用しています。

+0

サーバ側のレンダリング中に 'componentDidMount()'を使用できるかどうかはわかりません。私はそれを見落とすためにノードのためのポリフィルの使用を見て覚えています(?)。 – 82Tuskers

+0

私はサーバー側のレンダリングは、静的なHTMLマークアップを生成すると思う。あなたの反応コードは含まれていません。あなたはあなたのログを見ることができません。そのロジックを処理するマークアップとともにバンドルを含める必要があります。 –

+0

@Prakashsharmaあなたはwebpackから 'bundle.js'を意味しますか? – MarksCode

答えて

0

私はhere

それでもあなたはChromeのコンソールに出力が表示されませんが、説明したように、サーバ側と呼ばれるだけのライフサイクルフックがcomponentWillMountだと思います。あなたはあなたのノードログにそれを見るしかありません。

これがあなたの質問に答えるかどうか教えてください。

+0

JSW要素のデータを取得するには、 'componentWillMount'または' constructor'を使う方が良いです。それがあなたがしようとしているものなら。また、私はこれが有用であることを発見した:http://www.crmarsh.com/react-ssr/ – 82Tuskers

関連する問題