简体   繁体   中英

'<' not recognized when using reactJS in server-side node.js

I want to pass React Component from server-side, which is written in node.js. Code(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});
});

console/ReactApp.js:

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

In both files, '<>' generated SyntaxError when running node server.js

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)

that's is JSX. You need to transpile it before use or run it with babel-node (the latter is NOT a recommended method).

Or you can use transpiled code like this:

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

See full api of React.createElement here

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM