ReactJS 服务器端渲染和 componentDidMount 方法

Question

我是React新手，请不要严格判断。我在服务器上呈现我的 React 应用程序并希望在前端执行代码。应用程序使用样式正确呈现并且没有警告或错误，尽管状态为空，因为我正在使用 API，它应该在前端执行，现在没问题。

据我了解，服务器呈现组件，并且由于服务器在服务器上呈现并安装了组件，因此它没有调用 componentDidMount() 方法我的 API 电话和其他员工

这是我的组件

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

我想我做的不对，所以请帮助我。

注意

在我没有调用的最高级别组件中 ReactDOM.render 可能会导致此行为吗？

tutorial 我用的例子

Answer 1

仔细阅读 tutorial 后找到了解决方案。

问题是我的注意力不集中，所有内容都在上面的教程中进行了描述。

基本上在捆绑文件中你应该调用 ReactDOM.render 再次执行应用程序，但它不会影响性能，因为 React 使用 VirtualDOM 并且与现有的 DOM 不同。

所以如果没有 ReactDOM.render js 将不会被执行。

所以我创建了单独的文件 app-script.js，这是我的 bundle 入口点，它用 ReactDOM.render 调用我的最高组件。

ReactJS 服务器端渲染和 componentDidMount 方法

ReactJS server side rendering and componentDidMount method

javascript

rendering

single-page-application

reactjs

react-router