如何將服務器端渲染中的數據從節點傳遞給 reactjs 組件

Question

我對 reactJs 很陌生，剛剛開始學習 reactJS 的功能。 我試圖找出一種方法，通過服務器端渲染概念將值從 nodeJS 傳遞到 reactJS。

在下面的示例中，我能夠定義一個 react 組件並將其添加到服務器中並在 UI 中呈現它，但我不確定如何將數據傳遞給可在組件呈現函數中使用的組件。

客戶端.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 中獲取此值嗎？

Answer 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, ...: ...})

如何將服務器端渲染中的數據從節點傳遞給 reactjs 組件

問題描述

1 個解決方案

解決方案1
1 已采納 2016-10-06 06:09:12

如何將服務器端渲染中的數據從節點傳遞給 reactjs 組件

問題描述

1 個解決方案

解決方案1 1 已采納 2016-10-06 06:09:12

解決方案1
1 已采納 2016-10-06 06:09:12