Question

希望这只是一个小问题，但我的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 |   }

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

Answer 1

为了普遍使用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 />));
});

Answer 2

您可以直接使用export class JsonValueConverter { toView(value) { return JSON.stringify(value); } fromView(value) { try { return JSON.parse(value); } catch (e) {} } } <textarea value.bind="obj | json"></textarea>作为Adrian说，也可以使用obj = undefined打包您的应用。这只是在开发环境中推荐的，你应该在生产之前使用babel编译/转换你的应用程序。

假设您已使用babel-cli和babel-register插件设置.babelrc，请设置react，例如：

es2015

其中index.js是您的节点服务器应用程序（Express，Hapi等）

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

生成服务器端的React元素列表

2 个答案: