在服務器端node.js中使用reactJS時無法識別“ <”

Question

我想從服務器端傳遞React組件，它是用node.js編寫的。 代碼（server.js）：

var ReactDOMServer = require('react-dom/server');
var ReactApp = require('./console/ReactApp');
app.get('*', function(req, res, next){
  var reactHtml = ReactDOMServer.renderToString(<ReactApp />);
  res.render('index',
   {reactOutput: reactHtml});
});

控制台/ReactApp.js：

var React = require('react');    
var ReactApp = React.createClass({      
    render: function() {
        return <div>Hello World</div>;
    }
});
module.exports = ReactApp;

在兩個文件中，運行node server.js時'<>'都會生成SyntaxError

var reactHtml = ReactDOMServer.renderToString(<ReactApp />);
                                                ^
at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:373:25)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (/.../www.js:7:11)
    at Module._compile (module.js:409:26)
    at Object.Module._extensions..js (module.js:416:10)

Answer 1

那就是JSX。 您需要先進行編譯，然后再使用babel-node（不建議使用后者）。

或者您可以使用像這樣的轉碼：

var reactHtml = ReactDOMServer.renderToString(React.createElement(ReactApp));

在這里查看React.createElement的完整API