在服务器端生成 React 元素列表答案

【问题标题】：Generating list of React elements server-side在服务器端生成 React 元素列表
【发布时间】：2017-06-06 05:19:23
【问题描述】：

希望这只是一个小问题，但我的 Express 服务器中有这个：

app.get('/', function(req, res) {
  res.send(ReactDOMServer.renderToString(React.createElement(App)));
});

但是我打的时候有问题：

this.posts = positions.map((bool, index) =>
  <Post key={index} pro={bool}/>
);

它似乎无法识别组件部分：

Unexpected token (19:6)
  18 |     this.posts = positions.map((bool, index) =>
> 19 |       <Post key={index} pro={bool}/>
     |       ^
  20 |     );
  21 |   }

任何帮助将不胜感激！谢谢！

【问题讨论】：

您是否使用babel-node 并且您是否配置了.babelrc？
我不知道，你能指出我正确的方向吗？我现在只有通过 webpack 配置的 babel 预设/插件。

标签： reactjs express server-side-rendering

【解决方案1】：

您可以像 Adrian 所说的那样直接使用 babel-cli，也可以使用 babel-register 包装您的应用程序。但这仅建议在开发环境中使用，您应该在生产环境中运行之前使用 babel 编译/转译您的应用程序。

假设您已经使用 react 和 es2015 插件设置了 .babelrc，请使用以下内容设置 index.js：

const fs = require('fs-promise');

fs.readFile('./.babelrc').then((babelrc) => {
  const config = JSON.parse(babelrc);
  require('babel-core/register')(config);
  require('./src/server');
});

./src/server 是您的节点服务器应用程序（Express、Hapi 等）

然后运行它NODE_ENV=development node index.js

【讨论】：

【解决方案2】：

为了普遍使用 JSX，你还需要在你的服务器上配置 Babel。为了运行babel-node，您需要像这样安装babel-cli：

npm install -g babel-cli

在您的项目中，您需要像这样配置.babelrc：

（这些预设作为单独的包提供。例如，如果要使用react预设，则需要将babel-preset-react作为项目依赖项。）

{
  "presets": ["es2015", "react"] // you can add or remove presets
}

然后在您的代码中，它会向您显示意外的令牌：

this.posts = positions.map((bool, index) => (
  <Post key={index} pro={bool} />
));

然后你可以像这样重构你的express 路由：

// requires es2015 preset
// you can also use require
import { renderToString } from 'react-dom';

app.get('/', (req, res) => {
  res.send(renderToString(<App />));
});

【讨论】：