サーバ側はでレンダリングするためのコンポーネントをエクスポート

Question

が

全く反応する方法：

私は今、私は、サーバー側のレンダリングを行う方法をしようとしています、反応するようにかなり新しいです、私は私のサーバーとして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; 

私はJSXをtranspileするバベルを使用しますが、私は、サーバーを起動したとき、私はのようなエラーを取得しておく理由は、私にはわからない：

不変違反：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); 
});