我正在尝试在服务器端呈现我的网页以获得更好的性能,但我遇到了一个问题,即我的页面组件 componentDidMount() 没有被调用。

例如,这是我的主要模板文件:

import React from 'react';
import Cube from './components/Cube/Cube.jsx';

class Index extends React.Component {
  render() {
    return (
          <html>
            <head>
              <title>{this.props.title}</title>
            </head>
            <body>
              <Cube />
            </body>
          </html>
    );
  }
}

还有我的 Cube.jsx:
import React from 'react';

class Cube extends React.Component {
    componentDidMount() {
        console.log("Hey!");
    }

    render() {
        return (
            <div>
                <h1>Hello</h1>
            </div>
        );
    }
}

export default Cube;

我没有看到“嘿!”即使我在页面加载时看到 <h1>Hello</h1>,我的 pm2 日志和 Chrome 控制台也被注销。这阻止我对我的组件有任何逻辑。

我如何解决这个问题并使我的子组件的 componentDidMount() 被调用?注意我使用 express-react-views 进行服务器端渲染。

最佳答案

我认为将被称为服务器端的唯一生命周期钩子(Hook)是 componentWillMount,如 here 所述

即便如此,您也不会在 Chrome 的控制台上看到输出。您可能只会在 Node 日志中看到它。

如果这能回答您的问题,请告诉我。

关于node.js - 服务器端渲染中的 ComponentDidMount(),我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/46143994/

10-11 14:54