希望这听起来不太荒谬,但是,执行以下操作可以吗?
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/