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

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，但是当我启动服务器时，我不知道为什么我总是得到这样的错误：

Invariant Violation: renderToString(): You must pass a valid 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 中导出用于服务器端渲染的组件

How to export Component for server side rendering in React

node.js

express

reactjs

react-jsx