Je suis très nouveau pour réagirJs et viens de commencer à apprendre les fonctionnalités de reactJS. J'essaie de trouver un moyen de passer la valeur de nodeJS à reactJS via le concept de rendu côté serveur.
Dans l'exemple ci-dessous, j'ai été en mesure de définir unréagir composant et l'ajouter dans le serveur et le rendre dans l'interface utilisateur, mais je ne suis pas sûr de savoir comment transmettre les données au composant qui peut être utilisé à l'intérieur de la fonction de rendu du composant.
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);
})
Mise à jour 1:
Je suis maintenant en mesure de transmettre la valeur au composant rendu côté serveur comme indiqué ci-dessous
React.createElement(Component,{object:...})
Maintenant, la configuration côté serveur fonctionne bien.
J'ai besoin de faire ça {object:...} disponible dans mon client.js également pour que la fonctionnalité côté client fonctionne. Une idée de comment obtenir cette valeur dans client.js?
Réponses:
1 pour la réponse № 1React.createElement
ReactElement createElement(
string/ReactClass type,
[object props],
[children ...]
)
Créez et retournez un nouveau ReactElement du type donné. L'argument de type peut être une chaîne de nom de balise HTML (par exemple, "div", "span", etc.) ou un ReactClass (créé via React.createClass).
Dans votre version dans le
React.createElement(Component)
tu as besoin d'utiliser quelque chose comme
React.createElement(Component, {obj: obj, ...: ...})