使用 React-Engine 和 Express 将服务器端变量传递给客户端

Question

我是 React/React-Engine 的新手。我在服务器端有一个配置，我需要将某些值传递给客户端，但是我依赖 NODE_ENV 才能获得正确的配置。

var config = {
    local: { ... }
    production: { ...}
}

module.exports = config[process.env.NODE_ENV]

这在服务器端工作得很好，但是因为我需要在客户端引用这些对象中包含的一些值，所以我不能 require(./config);在我的 React JSX 中。

有什么简单的方法可以将这些东西传递到 React 中吗？归根结底，如果我能以某种方式将 'config' 直接传递给 React 而不必担心客户端的 NODE_ENV，我会很高兴。

谢谢

Answer 1

最常见在呈现之前将数据从服务器传递到客户端的方法是将其嵌入全局JavaScript变量 在你的 React 正在渲染的页面上。

因此，例如，在您实际渲染一些模板的中间件中，其中包含您的 <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>

HOWEVER 显然 react-engine 已经提供了自己的客户端发送数据的方式：

Data for component rendering

The actual data that gets fed into the component for rendering is the renderOptions object that express generates.

https://github.com/paypal/react-engine#data-for-component-rendering

如您在 this example 中所见，movies json 只是被传递到渲染中：

app.get('*', function(req, res) {
  res.render(req.url, {
    movies: require('./movies.json')
  });
});

然后，借助框架的魔力，可能 this line, the information is provided for your components and then the 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 添加到你的 render 调用中，它应该在你的组件的 props.

中可用

对于非常好奇的人：

确实，正如我们在 this line onwards 上看到的那样，引擎合并了 renderOptions 和 res.locals，并最终将其传递给 React。

// 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));

Answer 2

react-helper (https://github.com/tswayne/react-helper) 与 express（以及任何其他视图渲染节点框架）配合良好的 react-engine 替代品。它几乎可以处理您在任何节点框架中为您呈现反应组件所需做的一切。您只需为 webpack 创建一个入口点（js 文件）（它可以为您生成您的 webpack 配置）并向您的控制器和视图添加一行，您的组件将在该页面上呈现。您还可以将数据从 express 传递到您的 React 组件，当该组件在您的浏览器中绑定时，它将可以访问该服务器端数据。

const component = reactHelper.renderComponent('MyComponent', {prop: config.prop}) res.render('view-to-render', {component})

react-helper 也有 express 中间件 (https://github.com/tswayne/express-react-helper)，可以让你添加对所有视图可用的上下文，方便配置数据。

app.use(expressReactHelper.addToReactContext({configProp: config.foo}))

使用 React-Engine 和 Express 将服务器端变量传递给客户端

Server-side variables to Client-Side with React-Engine and Express

express

reactjs

react-engine

对于非常好奇的人：