Cách xuất Cấu phần cho hiển thị bên máy chủ trong React

Question

Tất cả:

Tôi khá mới đối với React, hiện tại tôi đang cố gắng làm cách hiển thị phía máy chủ, tôi sử dụng Express.js làm máy chủ của mình, vì vậy mã cũng giống như:

//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 
    }); 
}); 

Và

// components.js 
var React = require("react"); 

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

module.exports = MyCom; 

tôi sử dụng babel để transpile các JSX, nhưng khi tôi khởi động máy chủ, tôi không biết tại sao tôi cứ bị lỗi như:

Vi phạm bất biến: renderToString(): Bạn phải vượt qua Phản hồi hợp lệ.

Bất kỳ ai có thể đưa ra một số đầu mối tại sao điều này không hoạt động?

Cảm ơn

Answer 1

mô-đun của bạn xuất khẩu một ReactComponent, và renderToString chấp nhận một ReactElement (ví dụ: một instantiated ReactComponent).

Để làm cho nó, bạn muốn nhanh chóng nó như vậy:

ReactDOMServer.renderToString(<MyCom />); 

Answer 2

Sử dụng một nhà máy cho phép bạn có tất cả các thành phần của bạn trong tập tin riêng biệt và nhanh chóng chúng mà không sử dụng jsx cú pháp trong máy chủ của bạn. Rất hữu ích cho các thành phần wrapper chính.

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); 
});