isomorphic react.js without flux

Question

我是react.js的新手。我想製作同構的react.js組件。我想知道是否有可能使它沒有通量模式？現在我有一個小組件，並且在組件內部有一個api獲取方法，因爲它看起來這個api調用運行兩次:(。

爲了更加清晰，我想在服務器端渲染DOM，並且想處理react.js組件事件瀏覽器端

我的組件看起來像：

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> 
    ) 
    } 
} 

現在，無論api調用如何，都呈現您的ParentComponent。一旦安裝了ParentComponent，它將自動觸發MyComponent的渲染。