isomorphic react.js without flux

Question

私はreact.jsで初心者です。私はisomorphic react.jsコンポーネントを作りたい。フラックスパターンなしで作ることが可能だろうか？今はコンポーネントがなく、APIの呼び出しメソッドが2回実行されているようです。（。

もっとわかりやすくするために、私はサーバー側でDOMをレンダリングしたいと思います。ブラウザ側でのイベント

私のコンポーネントは次のようになります。

Class MyComponent extends React.Component{ 

// my component code 
// components events 

render() {} 

} 


if (!is_server()) { 


apiFetch.my_api_call(function (result) { 
    ReactDom.render(<MyComponent data={result.data}/>, document.getElementById('navigation')) 
}); 


}else{ 

apiFetch.my_api_call(function (result) { 
    res.status(200).send(
     ReactDOMServer.renderToString(React.createElement(MyComponent, {data: result.data})) 
    ); 
}); 

Answer 1

は、その子の親コンポーネントになりますしてくださいMyComponent

class ParentComponent extends React.Component { 
    componentDidMount() { 
    // make api call 
    apiCall.then((data) => { 
     this.setState({ 
     reqData : data, 
     }) 
    }) 
    } 

    getComponentToRender() { 
    if(typeof this.state.reqData === 'undefined') { 
     return false; 
    } else { 
     return (
     <MyComponent data={result.data}/> 
    ) 
    } 
    } 

    render() { 
    const componentToRender = this.getComponentToRender(); 
    return (
     <div> 
     <componentToRender /> 
     </div> 
    ) 
    } 
} 

これで、ParentComponentをapi呼び出しに関係なくレンダリングします。 ParentComponentがマウントされると、自動的にMyComponentのレンダリングがトリガーされます。