Wie Komponente exportieren für Server-Seite in Rendering Reagieren

Question

Alle:

ich ziemlich neu bin jetzt zu reagieren, ich versuche, wie Server-Seite Rendering zu tun, verwende ich Express.js wie mein Server, so dass der Code wie ist:

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

Und

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

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

module.exports = MyCom; 

ich babel verwenden, um die JSX transpile, aber wenn ich Server zu starten, ich weiß nicht, warum ich wie immer Fehler halten:

Invariante Verletzung: renderToString(): Sie müssen ein gültiges ReactElement übergeben.

Kann jemand einen Hinweis geben, warum das nicht funktioniert?

Dank

Answer 1

Ihr Modul exportiert ein ReactComponent und renderToString akzeptiert eine ReactElement (das heißt ein instanziiert ReactComponent).

Um es zu machen, wollen Sie es wie so instanziiert:

ReactDOMServer.renderToString(<MyCom />); 

Answer 2

eine Fabrik ermöglicht es Ihnen, alle Komponenten in separaten Dateien zu haben und sie instanziiert ohne jsx Syntax in Ihrem Server. Sehr nützlich für die Hauptverpackung Komponente.

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