我是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
。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句