Jak wyeksportować komponent na stronie serwera renderowania w React

Question

All:

Jestem całkiem nowy, React, teraz próbuję jak to zrobić boczną rendering serwera, używam Express.js jako mojego serwera, więc kod jest jak:

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

And

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

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

module.exports = MyCom; 

używam Babel transpile się JSX, ale kiedy zaczynam serwera, nie wiem dlaczego wciąż otrzymuję błąd jak:

Niezgodne naruszenie: renderToString(): Musisz podać prawidłową wartość ReactElement .

Czy ktoś może dać jakiś pomysł, dlaczego to nie działa?

Dzięki

Answer 1

moduł eksportuje ReactComponent i renderToString akceptuje ReactElement (to jest instancja ReactComponent).

Aby to uczynić, chcesz oznacz ją tak:

ReactDOMServer.renderToString(<MyCom />); 

Answer 2

Korzystanie z fabryki pozwala mieć wszystkie składniki w oddzielnych plikach i instancję je bez użycia jsx składni w serwerze. Bardzo przydatne dla głównego elementu opakowania.

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