如何在React中导出服务器端渲染的Component

Question

所有:

我对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

您的模块导出a ReactComponent,并renderToString接受a ReactElement(即实例化ReactComponent).

为了呈现它,你想要实例化它:

ReactDOMServer.renderToString(<MyCom />);