如何将服务器端渲染中的数据从节点传递给reactjs组件
Posted
技术标签:
【中文标题】如何将服务器端渲染中的数据从节点传递给reactjs组件【英文标题】：How to pass data in server side rendering to reactjs component from node 【发布时间】：2017-02-14 18:19:45 【问题描述】：我对 reactJs 很陌生，刚开始学习 reactJS 的功能。我正在尝试找出一种通过服务器端渲染概念将值从 nodeJS 传递给 reactJS 的方法。
在下面的示例中，我能够定义一个反应组件并将其添加到服务器中并在 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:...)
现在服务器端设置工作正常。
我需要在我的 client.js 中提供此 object:... 以使客户端功能正常工作。知道如何在 client.js 中获取此值吗？
【问题讨论】：
【参考方案1】：React.createElement
ReactElement createElement(
string/ReactClass type,
[object props],
[children ...]
)
创建并返回给定类型的新 ReactElement。 type 参数可以是 html 标签名称字符串（例如，'div'、'span' 等），也可以是 ReactClass（通过 React.createClass 创建）。
在你的版本中
React.createElement(Component)
你需要使用类似的东西
React.createElement(Component, obj: obj, ...: ...)
【讨论】：
这会破坏客户端交互。需要在 client.js 中进行哪些更改才能使客户端 javascript 也能正常工作？以上是关于如何将服务器端渲染中的数据从节点传递给reactjs组件的主要内容，如果未能解决你的问题，请参考以下文章
如何将从数据库接收到的数据作为道具传递给 Reactjs 中的另一个组件
如何将图像从前端（reactjs）传递到后端（nodejs）并将其上传到firebase存储？
如何从 Reactjs 中的 useEffect 挂钩访问道具
您可以将模型属性从 asp.net 模型传递到 reactjs.net 组件吗？