[英]ReactJS server side rendering and componentDidMount method
I am new to React, so please don't judge strictly. 我是React的新手,所以请不要严格判断。 I am rendering my React app on server and want execute code on frontend side.
我在服务器上渲染我的React应用程序,并希望在前端执行代码。 Application renders properly with styles and without warnings or errors, though with empty state since I am using API which should execute on front side and it is OK for now.
应用程序正确地呈现样式并且没有警告或错误,但是由于我使用的API应该在正面执行并且现在可以,因此处于空状态。
as I understand server renders component and since server rendered and mounted component on server and it is not calling componentDidMount()
method which should do my API calls and other staff 据我所知服务器渲染组件,因为服务器渲染和挂载组件在服务器上,它不调用
componentDidMount()
方法,它应该做我的API调用和其他工作人员
this is my component 这是我的组成部分
import React from 'react';
import {render} from 'react-dom';
import SpComparison from './spComparison.jsx';
import Comparison from './comparison.jsx';
import AnalystRatings from './analystRatings.jsx';
export default class Insights extends React.Component {
constructor(props){
super(props);
this.state = {
charts: []
}
let _this = this;
}
componentDidMount() {
console.log("I want to do log on front end side, but can't")
}
render () {
let charts = this.state.charts.map(function(i){
if (i.type == 'comparison'){
return <Comparison key={ i.id } config={ i.config } />
}
else if (i.type == 'sp-comparison'){
return <SpComparison key={ i.id } config={ i.config } />
}
if (i.type == 'analyst-ratings'){
return <AnalystRatings key={ i.id } config={ i.config } />
}
});
return (
<div id="insights" className="container">
<div className="row">
<div className="col-md-3 hidden-md-down" style={{
marginTop: 10
}}>
<ul className='finstead-tabs'>
<li className="finstead-tabs-header">
Categories
</li>
<li>
<a href='' className="finstead-active-tab">Performance</a>
</li>
<li>
<a href=''>Financial</a>
</li>
<li>
<a href=''>Valuation</a>
</li>
<li>
<a href=''>Shares</a>
</li>
<li>
<a href=''>Outlook</a>
</li>
</ul>
</div>
<div className="col-xs-12 col-md-9">
{ charts }
</div>
</div>
</div>
)
}
}
I guess I am doing it not right way, so please help me. 我想我做得不对,所以请帮助我。
NOTE 注意
In highest level component I haven't called ReactDOM.render
may it cause this behaviour? 在最高级别的组件我没有调用
ReactDOM.render
可能会导致这种行为?
I have found solution after reading tutorial more carefully. 我仔细阅读教程后找到了解决方案。
Problem was my inattention and everything is described in tutorial above. 问题是我的疏忽,一切都在上面的教程中描述。
basically in bundled file you should call ReactDOM.render
to execute application again, but it won't affect on performance since React uses VirtualDOM and diffing with already existing DOM. 基本上在捆绑文件中你应该调用
ReactDOM.render
再次执行应用程序,但它不会影响性能,因为React使用VirtualDOM并与已有的DOM进行区分。
so without ReactDOM.render
js won't be executed. 所以没有
ReactDOM.render
js将不会被执行。
so I created separate file app-script.js
which is my entry point for bundle and it calls my highest component with ReactDOM.render
. 所以我创建了单独的文件
app-script.js
,这是我的bundle的入口点,它用ReactDOM.render
调用我的最高组件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.