2
私はreactJsに非常に新しく、reactJSの機能を学び始めました。私は、serverJレンダリングの概念を使ってnodeJSからreactJSに値を渡す方法を理解しようとしています。ノード側からのレスキューコンポーネントへのサーバーサイドレンダリングでのデータの受け渡し方法
以下の例では、リアクションコンポーネントを定義してサーバーに追加してUIでレンダリングできましたが、コンポーネントレンダリング機能内で使用できるコンポーネントにデータを渡す方法がわかりません。
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);
})
アップデート1：
私は今、今、サーバ側の設定が正常に動作します
以下のようにサーバー側レンダリングコンポーネントに値を渡すことができています。
クライアント側の機能を動作させるためにも、{object:...}をclient.jsで利用できるようにする必要があります。どのようにclient.jsでこの値を取得するか考えていますか？
これは、クライアント側の相互作用を壊すようなものを使用する必要があります。クライアントサイドのjavascriptも同様に動作させるために、client.jsでどのような変更を加える必要がありますか？ – Learner