Ich bin sehr neu im Reagieren und habe gerade angefangen, die Funktionen von Reagieren zu lernen. Ich versuche, eine Möglichkeit zu finden, den Wert von nodeJS über das serverseitige Rendering-Konzept an reactJS zu übergeben.
Im folgenden Beispiel konnte ich eine definierenReagieren Sie auf die Komponente und fügen Sie sie in den Server ein und rendern Sie sie in der Benutzeroberfläche. Ich bin mir jedoch nicht sicher, wie ich die Daten an die Komponente übergeben soll, die in der Komponentenrenderfunktion verwendet werden kann.
client.js
var React=require("react");
var ReactDOM=require("react-dom");
var Component=require("./Component.jsx");
ReactDOM.render(
React.createElement(Component),document
);
Component.jsx
var React=require("react"),
Request=require("superagent")
module.exports = React.createClass({
getInitialState: function () {
return {
};
},
componentWillMount: function () {
},
componentDidMount: function() {
clearInterval(this.intervalID)
},
_handleClick: function () {
alert("You clicked!")
},
render:function(){
return(
<html>
<head>
<title> ReactJS - demo </title>
<link rel="stylesheet" href="/style.css"/>
</head>
<body>
<div>
<h1>react js testing</h1>
<p>This is so cool</p>
<button onClick={this._handleClick}>Click Me!</button>
</div>
<script src="/bundle.js"/>
</body>
</html>
);
}
});
Server.js
require("babel-register")({
presets:["react"]
});
var express = require("express");
var app=express();
var React=require("react");
var ReactDOMServer=require("react-dom/server");
var Component=require("./Component.jsx");
app.use(express.static("public"));
app.get("/",function(request,response){
var html=ReactDOMServer.renderToString(
React.createElement(Component)
)
response.send(html)
});
var PORT=4444;
app.listen(PORT,function(){
console.log("Node js listening in port:"+ PORT);
})
Update 1:
Ich bin jetzt in der Lage, den Wert wie folgt an die serverseitig gerenderte Komponente zu übergeben
React.createElement(Component,{object:...})
Jetzt funktioniert das serverseitige Setup einwandfrei.
Ich muss das machen {object:...} verfügbar in meinem client.js auch damit clientseitige Funktionalität funktioniert. Irgendeine Idee, wie man diesen Wert in client.js erhält?
Antworten:
1 für die Antwort № 1React.createElement
ReactElement createElement(
string/ReactClass type,
[object props],
[children ...]
)
Erstellen Sie ein neues ReactElement des angegebenen Typs und geben Sie es zurück. Das Typargument kann entweder eine HTML-Tag-Namenszeichenfolge (z. B. "div", "span" usw.) oder eine ReactClass (über React.createClass erstellt) sein.
In deiner Version in der
React.createElement(Component)
Du brauchst so etwas wie
React.createElement(Component, {obj: obj, ...: ...})