कैसे सर्वर साइड में प्रतिपादन के लिए घटक निर्यात प्रतिक्रिया

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 लिए, लेकिन जब मैं सर्वर प्रारंभ, मैं नहीं जानता कि क्यों मैं की तरह त्रुटि प्राप्त हो रही:

Invariant उल्लंघन: रेंडर टॉस्ट्रिंग(): आपको एक वैध रिएक्ट एलिमेंट पास करना होगा।

कोई भी कुछ सुराग दे सकता है कि यह क्यों काम नहीं करता है?

धन्यवाद

Answer 1

आपका मॉड्यूल का निर्यात करता है एक ReactComponent, और renderToString एक ReactElement स्वीकार करता है (अर्थात एक instantiated 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); 
});