如何将服务器端渲染中的数据传递给节点的reactjs组件
我刚刚开始学习reactJS的function,我很新。 我试图找出一种方法,通过服务器端渲染概念从nodeJS传递的价值JS。
在下面的例子中,我能够定义一个反应组件,并将其添加到服务器,并在UI中呈现它,但我不知道如何将数据传递给可以在组件渲染函数内使用的组件。
client.js
var React=require('react'); var ReactDOM=require('react-dom'); var Component=require('./Component.jsx'); ReactDOM.render( React.createElement(Component),document );
Component.jsx
var React=require('react'), Request=require('superagent') module.exports = React.createClass({ getInitialState: function () { return { }; }, componentWillMount: function () { }, componentDidMount: function() { clearInterval(this.intervalID) }, _handleClick: function () { alert('You clicked!') }, render:function(){ return( <html> <head> <title> ReactJS - demo </title> <link rel='stylesheet' href='/style.css'/> </head> <body> <div> <h1>react js testing</h1> <p>This is so cool</p> <button onClick={this._handleClick}>Click Me!</button> </div> <script src='/bundle.js'/> </body> </html> ); } });
Server.js
require('babel-register')({ presets:['react'] }); var express = require('express'); var app=express(); var React=require('react'); var ReactDOMServer=require('react-dom/server'); var Component=require('./Component.jsx'); app.use(express.static('public')); app.get('/',function(request,response){ var html=ReactDOMServer.renderToString( React.createElement(Component) ) response.send(html) }); var PORT=4444; app.listen(PORT,function(){ console.log("Node js listening in port:"+ PORT); })
更新1:
我现在能够将值传递给服务器端呈现组件如下
React.createElement(Component,{object:...})
现在服务器端设置工作正常。
我需要使这个{object:...}
在我的client.js中也可用于客户端function工作。 任何想法如何在client.js中获得这个值?
React.createElement ReactElement createElement( string/ReactClass type, [object props], [children ...] )
创build并返回给定types的新ReactElement。 types参数可以是一个html标签名string(例如'div','span'等),或ReactClass(通过React.createClass创build)。
在你的版本中
React.createElement(Component)
你需要使用类似的东西
React.createElement(Component, {obj: obj, ...: ...})