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

您的模块导出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);
});

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

2 个答案: