如何在React中导出用于服务器端渲染的组件

所有：

我对React非常陌生，现在我正在尝试如何做服务器端渲染，我使用Express.js作为我的服务器，所以代码如下所示：

//server.js var express = require("express"); var ReactDOMServer = require("react-dom/server"); var MyCom = require("./components"); var domstring = ReactDOMServer.renderToString(MyCom); var app = express(); app.get("/", function(req, res){ res.json({ name: "new com", dom: domstring }); }); 

和

 // components.js var React = require("react"); var MyCom = React.createClass({ render: function(){ return (<h1>Hello, server side react</h1>); } }); module.exports = MyCom; 

我使用babel来传输JSX，但是当我启动服务器时，我不知道为什么我一直得到如下错误：

不变违规：renderToString（）：您必须传递一个有效的ReactElement。

任何人都可以提供一些线索为什么这不起作用？

谢谢

Answer 1

你的模块导出一个ReactComponent ，而renderToString接受一个ReactElement （即一个实例化的ReactComponent ）。

为了渲染它，你想要像这样实例化它：

 ReactDOMServer.renderToString(<MyCom />); 

Answer 2

使用工厂可以将所有组件放在单独的文件中，并在不使用服务器中的jsx语法的情况下实例化它们。 对于主包装器组件非常有用。

 require('babel-core/register')({ presets: ['react'] }); var express = require('express'); var reactDOM = require('react-dom/server'); var react = require('react'); var app = express(); app.get('/', function (req, res) { var mainFile = require('./app.jsx'); var output = reactDOM.renderToString(react.createFactory(mainFile)({ data: yourInitialData })); res.send(output); });