3

私はreactJsを初めて使用し、reactJSの機能を学び始めたばかりです。サーバー側のレンダリングの概念を介して nodeJS から reactJS に値を渡す方法を見つけようとしています。

以下の例では、react コンポーネントを定義してサーバーに追加し、UI でレンダリングすることができましたが、コンポーネント レンダリング関数内で使用できるコンポーネントにデータを渡す方法がわかりません。

client.js

var React=require('react');
var ReactDOM=require('react-dom');
var Component=require('./Component.jsx');


ReactDOM.render(
    React.createElement(Component),document
);

コンポーネント.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>
        );
    }

});

サーバー.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:

以下のように、サーバー側のレンダリングされたコンポーネントに値を渡すことができるようになりました

React.createElement(Component,{object:...})

これで、サーバー側のセットアップは正常に機能します。

{object:...}クライアント側の機能が機能するためにも、これを client.js で利用できるようにする必要があります。client.js でこの値を取得する方法はありますか?

4

1 に答える 1

1 
React.createElement
ReactElement createElement(
    string/ReactClass type,
    [object props],
    [children ...]
)

指定されたタイプの新しい ReactElement を作成して返します。type 引数は、html タグ名の文字列 (例: 'div'、'span' など) または ReactClass (React.createClass で作成) のいずれかです。

あなたのバージョンで

React.createElement(Component)

次のようなものを使用する必要があります

React.createElement(Component, {obj: obj, ...: ...})
于 2016-10-06T06:09:12.433 に答える