Question

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

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

这有效，但我无法访问我的链接，例如帐号设定。我的react-router设置如下：

<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中

ReactJS：转移道具

2 个答案: