ReactJS：传输道具答案

【问题标题】：ReactJS: Transferring PropsReactJS：传输道具
【发布时间】：2016-08-05 15:24:57
【问题描述】：

我正在用 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>

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

【问题讨论】：

标签： php reactjs websocket autobahn

【解决方案1】：

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

您可以使用的一种方法是像这样在 Main.jsx 中呈现您的孩子。将两个 props 传递给您的孩子（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'});

【讨论】：

感谢恩吉哈尔！我已经尝试了这两种解决方案，但它们都不起作用。对于第二种解决方案，我收到“未定义应用程序”错误。

【解决方案2】：

嗯，React 被设计为从上到下传递道具..

这让数据管理变得非常困难，因为您可以拥有许多需要相同数据的组件。

所以最好使用某种 Flux 架构（例如 Redux）或者像 Mobx 这样更简单的数据层。

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

【讨论】：