ReactJS：Transferring Props

Question

ReactJSでセンサーを監視するリアルタイムダッシュボードアプリケーションをやっている最中です。私はPHP上でAutobahnJS + Websocketを使用してデータをストリーミングしています。

これはコンポーネントビューでのダッシュボードの抽象化です。 Abstraction of dashboard in component view

Main.jsx：

class Main extends React.Component { 
constructor(props) { 
    super(props) 
} 

componentDidMount() { 
    $(document).foundation(); 

    var that = this; 

    var conn = new ab.Session('ws://xx.xxx.xxx.xx', function() { 
     conn.subscribe('', function(topic, data) { 
      console.log(data); 
      that.setState({ 
       result: data 
      }); 
     }); 
    }, function() { 
     console.warn('WebSocket connection closed'); 
    }, {'skipSubprotocolCheck': true}); 
} 
render() { 

    return (
     <div> 
      <div className="off-canvas-wrapper"> 
       <div className="off-canvas-wrapper-inner" data-off-canvas-wrapper> 
        <div className="off-canvas position-right" data-position="right" id="offCanvas" data-off-canvas> 
         <SensorDetails/> 
        </div> 

        <div className="off-canvas-content" data-off-canvas-content> 
         <Nav/> 

         <div className="row"> 
          <div className="columns medium-12 large 12"> 
           {this.props.children} 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    ); 
} 
}; 

module.exports = Main; 

Main.jsxからBuildingList.jsxに小道具を渡すために適切な方法は何ですか？

{this.props.children} 

これは動作しますが、私は例えば、私のリンクにアクセスできませんよ

<Dashboard data={this.state.result}/> 

で：私が交換しようとしていますアカウント設定。マイ反応するルータは、次のような設定されている：

<Router history={hashHistory}> 
    <Route path="/dashboard" component={Main} > 
     <Route path="/about" component={About} onEnter={requireLogin}/> 
     <Route path="/examples" component={Examples} onEnter={requireLogin}/> 
     <Route path="/accountSettings" component={AccountSettings} onEnter={requireLogin}/> 
     <IndexRoute component={Dashboard}/> 
    </Route> 
    <Route path="/" component={Login} onEnter={redirectIfLoggedIn}/> 
</Router> 

私はこの問題を解決するだろうか？ありがとう。

Answer 1

まあ、REACTはあなたが同じデータを必要とする部品の多くを持つことができるので、それは本当にハードにデータ管理を行い

..アップからダウンに小道具を渡すように設計されています。

フラックスアーキテクチャ（例：Redux）を使用する方がよい またはMobxのような単純なデータレイヤー。あなたがに（特別に）、彼らは非常に異なっているので、それぞれを見てみますが、データ管理のお手伝いをするように設計されなければならない

は

Answer 2

反応し、これを処理する方法はいくつかあります。

あなたが使用できる方法の1つは、Main.jsxの内部に子供をレンダリングすることです。あなたの子供に2つの小道具を渡す（stateとupdateState）。

{React.Children.map(this.props.children, (child) => { 
    return React.cloneElement(child, { 
     state: this.state, 
     updateState: (state) => this.setState(state) 
    }); 
}} 

子コンポーネントから、これを呼び出してMain.jsxの状態を更新できます。

this.props.updateState({prop: 'value'}) 

私はこれがリアクションでは最良の方法だとは思わない。私はイベントのアプローチを取ることを好む。私は通常、「グローバルに利用可能な状態」を聞いて更新するために、次のようなものを用意します。

componentDidMount() { 
    App.Event.on('state.update', (state = {}) => this.setState(state)); 
} 

App.Event Main.jsxの

Insideは、あなたがそうのようなイベントを焼成することによって呼び出すことができ、簡単なイベントシステムです。

App.Event.fire('state.change', {prop: 'value'});