如何将服务器端渲染中的数据传递给节点的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, ...: ...})