Question

我将React用于主应用程序，该应用程序在用户登录后启动。在用户登录之前，我有几个页面（登录，注册，错误，重置密码）不在主应用程序之外。对于主应用程序，我将视图引擎设置为：

app.engine('jsx', require('express-react-views').createEngine());

因此，现在已设置jsx视图引擎。现在，我想为我拥有的页面提供几个模板（登录，错误等），并向它们注入值。我尝试使用jsx，但由于某种原因它不起作用，我也不知道为什么。例如，这是我的error.jsx：

/** @jsx React.DOM */

var React = require('react');

class ErrorPage extends React.Component {
  render() {
    return (
      <html>
        <head>
          <title>Error</title>
        </head>
        <div>
          {this.props.error_message}
        </div>
      </html>
    );
  }
}

module.exports = ErrorPage;

我想像这样注入error_message：

app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  //res.locals.message = err.message;
  //res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  var path = __dirname + '/public/error.jsx';
  //res.sendFile(path);
  res.render(path, {
    error_message: err.message 
  });
});

现在不能给我

SyntaxError：意外令牌<< / p>

我该如何使用jsx发送单独的模板或并排使用另一个视图模板？我尝试使用handlebars，但不确定如何使多个视图引擎同时工作。最好仅为此目的容纳jsx。我的主要React应用正在运行，因为我将其附加到DOM根元素上并使用了webpack configs，但是在这里我不能这样做：我想发送模板，只注入一堆那里的参数。

渲染React JSX模板页面：错误意外<令牌

0 个答案: