ReactJS:传输道具

Question

我正在ReactJS中开发一个用于监控传感器的实时仪表板应用程序。我在PHP上使用AutobahnJS+Websockets来流式传输数据。

这是我在组件视图中的仪表板的抽象。组件视图中仪表板的抽象

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}/>

这是有效的，但我无法访问我的链接，例如帐户设置。我的react路由器是这样设置的：

<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

有几种方法可以处理这个问题。

你可以使用的一种方法是在Main.jsx中这样渲染你的孩子。将两个道具(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'})

我不认为这是React中最好的做事方式。我更喜欢采取活动的方式。我通常会有以下内容来收听和更新"全局可用状态"。

Main.jsx内部

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

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

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

Answer 2

React设计用于从上到下传递道具。。

这使得数据管理变得非常困难，因为可能有很多组件需要相同的数据。

因此，最好使用某种Flux架构(例如Redux(或者像Mobx这样更简单的数据层。

您应该看看每一个，因为它们非常不同，但旨在帮助您进行数据管理，(特别是(在React 中