服务器端渲染中的ComponentDidMount（）

Question

I'm trying to server-side render my webpage for better performance but am running into an issue where my page's components componentDidMount() s aren't getting called. 我试图在服务器端呈现我的网页以获得更好的性能，但是遇到了一个问题，即我的页面的组件componentDidMount()未被调用。

For example, this is my main template file: 例如，这是我的主模板文件：

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

And my Cube.jsx: 而我的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;

I'm not seeing "Hey!" 我没有看到“嘿！” getting logged out in my pm2 logs nor in my chrome console even though I'm seeing the <h1>Hello</h1> when the page loads. 即使在页面加载时看到<h1>Hello</h1> ，也无法在pm2日志或chrome控制台中注销。 This is stopping me from having any sort of logic for my component. 这使我无法为组件提供任何逻辑。

How do I get around this problem and make my subcomponents's componentDidMount() get called? 如何解决此问题并使子组件的componentDidMount()被调用？ Note I'm using express-react-views for my server-side rendering. 注意我正在使用express-react-views进行服务器端渲染。

Answer 1

I think the only lifecycle hook that will be called server side is componentWillMount as explained here 我想唯一的生命周期挂钩，将调用服务器端是componentWillMount作为解释这里

Even then you would not see output on Chrome's console. 即使那样，您也不会在Chrome的控制台上看到输出。 You are only likely to see it in your node logs. 您仅可能在节点日志中看到它。

Let me know if this answers your question. 让我知道这是否回答了您的问题。

服务器端渲染中的ComponentDidMount（）

问题描述

1 个解决方案

解决方案1
0 2017-09-10 19:12:12

服务器端渲染中的ComponentDidMount（）

问题描述

1 个解决方案

解决方案1 0 2017-09-10 19:12:12

解决方案1
0 2017-09-10 19:12:12