沒有通量的同構react.js

Question

我是react.js的新手。 我想制作同構的react.js組件。 我想知道是否可以不使用助焊劑模式？ 現在我幾乎沒有組件，並且組件內部有api fetch方法，並且看來此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的呈現。