ReactJS：传输道具

我正在使用ReactJS中的实时仪表板应用程序来监视传感器。我在PHP上使用AutobahnJS + Websockets来传输数据。ReactJS：传输道具

这是我的仪表板在组件视图中的抽象。 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>

我该如何解决这个问题？谢谢。

来源

2016-08-05 Marcus Kyril Lim

好，反应的目的是从上往下传递道具..

它使数据管理真的很辛苦，因为你可以有很多这就需要相同的数据的组件。

所以它最好使用某种Flux Architecture（例如Redux）或更简单的数据层（如Mobx）。

你应该看看每个因为他们有很大的不同，但旨在帮助您与数据管理，（特别是）在阵营

来源

2016-08-05 15:52:28 webdeb

有一对夫妇的方式来处理这个问题。

您可以使用的一种方法是像Main.jsx一样渲染您的孩子。传递两个道具给你的孩子（状态和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'})

我不认为这是在React中做事的最佳方式。我更喜欢采取事件方法。我通常会有类似以下的内容来侦听和更新“全局可用状态”。 Main.jsx的

内

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

App.Event是一个简单的事件系统，您可以通过触发事件，像这样调用。

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

来源

2016-08-05 16:05:40 Enijar

谢谢Enjijar！我已经尝试了两种解决方案，但都没有工作。对于第二种解决方案，我收到“应用程序未定义”错误。 –

ReactJS：传输道具

回答

相关问题