ReactJS 在组件之间传播数据答案

【问题标题】：ReactJS propagate data between ComponentsReactJS 在组件之间传播数据
【发布时间】：2017-07-09 00:42:49
【问题描述】：

我正在使用 ReactJS 开发 SPA。我有一个根组件 App，然后是几个子组件。在 App 组件中，我试图存储一些应用程序级别的状态，例如登录的用户 ID 和其他数据。但是我没有看到我的状态被传播到子组件中。

应用程序

import { Router, Route, Link, IndexRoute, browserHistory, hashHistory } from 'react-router';
import ParameterContainer from './components/parameter/parameter-container';
import NavMenu from './components/navigation/nav-menu';
import {Alert} from 'react-bootstrap';
import SelectFilter from './components/sample/sample-container';

// Main component and root component
export default class App extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            userId: null,
            roles: null,
            parameterTypes: {
                'STRING': 'STRING',
                'BOOLEAN': 'BOOLEAN',
                'INTEGER': 'INTEGER',
                'DECIMAL': 'DECIMAL'
            }
        };
    }

    render() {
        return (
            <div>
                <NavMenu />
                <div className="container">
                    {this.props.children}
                </div>
            </div>
        )
    }
}

// page for 404
class NoMatch extends React.Component {
    render() {
        return (
            <div className="container">
                <Alert bsStyle="danger">
                    <h1>404: Not Found</h1>
                    <h3>The requested resource does not exist!</h3>
                </Alert>
                <img src="images/404.png" style={{display: 'block', margin: '0 auto', width: 300, height: '*'}} />
            </div>
        )
    }
}

// render the application
ReactDOM.render((
    <Router history={hashHistory}>
        <Route path="/" component={App}>
            <Route path="parameter" component={ParameterContainer} />
            <Route path="sample" component={SelectFilter} />
            <Route path="*" component={NoMatch}/>
        </Route>
    </Router>
), document.getElementById('react'))

子组件

import React from 'react';

export default class ParameterContainer extends React.Component {

    constructor(props) {
        super(props);
        this.state = { parameters: [] };
        this.client = rest.wrap(mime);
        this.fetchFromApi = this.fetchFromApi.bind(this);

        console.log('Props:' + props);
    }

    render() {
        ....
    }

this.props 不包含我所期望的。我需要将数据传递给子组件。

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

要将state 或props 传递给子组件，您可以在Route 节点上显式它们

   <Route path="parameter" component={ParameterContainer} parentState={this.state} />

然后，您可以在子组件中以props 的身份访问它们

 constructor(props) {
   super(props)
   console.log('parentState:' + props.parentState);
 }

这里有更好更详细的答案：react-router - pass props to handler component

【讨论】：

【解决方案2】：

状态不会传播到子组件 - 您必须在子组件上设置道具才能传递数据。您可以使用React.cloneElement 为孩子添加属性：

let childrenWithProps = React.cloneElement({this.props.children, {
        userid: this.state.userId,
        ...
    });

最好的方法是使用 Redux 来管理应用程序数据并将应用程序级状态存储在 Redux 存储中。如果你不使用 Redux，你也可以考虑使用 react Context。根据文档，您可以在以下情况下使用 Context：

您想通过组件树传递数据而不必在每个级别手动传递道具

【讨论】：