我是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}))
);
});
最佳答案
创建一个父组件,其子组件为 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
的渲染。
关于javascript - 没有flux的同构react.js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36822258/