Ant*_*Ant 13 express reactjs react-engine
我是React/React-Engine的新手.我在服务器端有一个配置,我需要将某些值传递给客户端但是我依赖于NODE_ENV才能获得正确的配置.
var config = {
local: { ... }
production: { ...}
}
module.exports = config[process.env.NODE_ENV]
哪个在服务器端工作得很好,但是因为我需要在客户端引用这些对象中包含的一些值所以我不能要求(./ config); 在我的React JSX中.
有没有简单的方法将这些东西传递给React？在一天结束的时候,如果我能以某种方式直接将'config'直接传递给React而不必担心客户端的NODE_ENV,我会很高兴.
谢谢
fir*_*oit 15
在呈现之前将数据从服务器传递到客户端的最常用方法是将其嵌入到React呈现的页面上的全局JavaScript变量中.
因此,例如,在您实际<script>使用React应用程序渲染包含标记的模板的中间件中,您可以添加信息并将其抓取在模板上:
var config = require('../config-from-somewhere');
app.get('/', function (req, res) {
res.render('index', {config: JSON.stringify(config)});
});
还有一个示例小胡子模板:
<html>
<body>
<script>
window.CONFIG = JSON.parse({{{config}}});
</script>
<script src="my-react-app.js"/>
</body>
</html>
无论其显然react-engine已经提供了它自己的方式发送数据做客户端:
组件渲染的数据
提供给组件进行渲染的实际数据是表示生成的renderOptions对象.
https://github.com/paypal/react-engine#data-for-component-rendering
正如您在此示例中所看到的,moviesjson只是被传递到render中:
app.get('*', function(req, res) {
res.render(req.url, {
movies: require('./movies.json')
});
});
然后,通过框架魔法的优雅,可能在这一行上,为您的组件提供信息,然后List使用它props.movies.
module.exports = React.createClass({
displayName: 'List',
render: function render() {
return (
<div id='list'>
<h1>Movies</h1>
<h6>Click on a movie to see the details</h6>
<ul>
{this.props.movies.map(function(movie) {
return (
<li key={movie.id}>
<Router.Link to={'/movie/' + movie.id}>
<img src={movie.image} alt={movie.title} />
</Router.Link>
</li>
);
})}
</ul>
</div>
);
}
});
因此,基本上将您config的渲染调用添加到您的渲染调用中,它应该在您的组件中可用props.
事实上,正如我们可以看到这行开始,发动机融合renderOptions和res.locals最后传递下来反应.
// create the data object that will be fed into the React render method.
// Data is a mash of the express' `render options` and `res.locals`
// and meta info about `react-engine`
var data = merge({
__meta: {
// get just the relative path for view file name
view: null,
markupId: Config.client.markupId
}
}, omit(options, createOptions.renderOptionsKeysToFilter));
和:
return React.createElement(Component, merge({}, data, routerProps));
| 归档时间： |
|
| 查看次数： |
10257 次 |
| 最近记录： |