node.js - 我可以在nodejs同构react的react类中重新发送整个页面吗?

标签 node.js reactjs

希望这听起来不太荒谬,但是,执行以下操作可以吗?

app.get('/', function(req, res) {
    res.send(ReactDOMServer.renderToString(MainLayout()));
});

其中 MainLayout() 是一个包含整个页面的 React 类。

var React = require('react');

var MainLayout = React.createClass({
  getInitialState: function () {
      return {
          headerStyle : {'border': '1px solid #ccc'}
      };
  },
  changeStyle: function () {
      this.setState({headerStyle: {'border': '1px solid #ab1'}});
  },
  render: function() {
    return (
        <html>
            <head>
                <title>This is a test.</title>
            </head>
            <body>
                <div onClick={this.changeStyle} style={this.state.headerStyle}>
                    Hi {this.props.name}
                </div>
                <script type="text/javascript" src='/public/js/app.js'></script>
            </body>
        </html>
    );
  }
});

module.exports = MainLayout;

我已设法渲染页面,但页面加载后我的 onClick 似乎没有响应我的点击。

我只是想知道是否可以使用 Nodejs、React 0.14 和带有 React 预设的 Babel 来完成此操作。

最佳答案

所以我在这里试图做的是最基本意义上的同构 react 。我碰巧愚蠢地忘记了在浏览器js中包含用于执行组件本身的javascript。

reactDOM.render(<App />, document.getElementById('content'))

在更改了一些代码后,它可以正常工作,因为我意识到我可以在服务器端渲染 html、head 和 body 标签,但不能在客户端对其进行 react 工作,因此渲染 MainLayout 会导致很多问题。创建另一个名为“App”的 React 类并将其填充在名为“content”的 div 标签之间即可。

关于node.js - 我可以在nodejs同构react的react类中重新发送整个页面吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33789373/

相关文章:

node.js - 如何让 Mongoose 在 MongoDB 中找到非 Mongoose 创建的数据?

javascript - 具有动态嵌套对象的 Mongoose 模式

javascript - 更改 props 后,componentDidMount 不断重复调用

javascript - 为什么我的函数不被识别? JavaScript

javascript - 对于通过 require() 调用目标文件的命令行工具,我们如何安全地避免本地和全局 npm 包之间的冲突?

javascript - 在reactjs中验证登录页面

javascript - react 不通过 Prop 将状态传递给 child

reactjs - 使用 TypeScript 为 React 高阶组件输入注解

node.js - 如何从 Zombie.js 流式传输/管道响应对象

javascript - 导航 - 替代 react-router v4 中的 browserHistory