如何将道具传递给React中的儿童组件

Question

我正在开发单页面应用程序，并希望将用户身份验证数据传递给儿童组件。我如何在儿童组件reactjs中传递和访问它。我在应用程序容器中调用身份验证方法，并需要将其传递给它的某些子组件。

@asyncConnect([{ 
promise: ({ store: { dispatch, getState } }) => { 
    const promises = []; 
    if (!isLoaded(getState())) { 
     promises.push(dispatch(loadmyauth())); 
    } 
    return Promise.all(promises); 
} 
}]) 
@connect(
state => ({ 
    user: state.auth.user 
})) 
export default class App extends Component { 
static propTypes = { 
    children: PropTypes.object.isRequired, 
    user: PropTypes.object 
}; 
static contextTypes = { 
    store: PropTypes.object.isRequired 
}; 
constructor(props) { 
    super(props); 
    var user = { 
     auth :'false', 
     account_type : 'N', 
     profile_pic : null, 
     useremail : null, 
     userid : null, 
     username : null, 
     FNAME : null, 
     LNAME : null, 
    } 

    this.state = { 
     user: props.user, 
     authloaded: false, 
    } 
} 
render() { 
    const { children } = this.props; 
    return (
     <div> 
      <Helmet {...config.app.head}/> 
      <Header user={this.state.user} /> 
      <div className="mainapp-content">{this.props.children}</div> 
     </div> 
    ); 
} 
} 

Answer 1

我通过使用redux来管理应用程序状态，我遇到了这个解决方案。我对每个组件进行本地状态反应，并保留数据。当我想改变数据时，我在处用反应状态和redux数据在本地进行更改，以保持数据同步。

Answer 2

我发现MobX是一个很好的状态管理和它的作品非常好，React。您可以通过<Provider>组件使用React的context。

let store = observable({ 
    userInfo: myUserInfo 
}); 

然后换你的应用程序中的节点：

<Provider store={store}> 
<MainAppNode> 
</Provider> 

在您的组件，访问商店的装饰你的组件作为这样的：

import { observer, inject } from 'mobx-react' 
@inject("store") @observer class AddBar extends React.Component { 
    //access your store with this.props.store 
} 

Answer 3

如果您使用的终极版比我不要以为你在你的应用程序组件中设置状态。相反，状态在redux存储中处理并作为道具传递给您的应用程序组件。但我可能是错的，我不是一个专家。

如果你想处理你的应用程序组件的状态并通过上下文传递它，这应该让你开始。

import React from 'react'; 
import _ from 'underscore'; 

var AppHeader = React.createClass({ 

    contextTypes: { 
    appManager: React.PropTypes.object 
    }, 
    render() { 

    return <div> 
       <b>First Name:</b><span>{this.context.appManager.User.FirstName}</span><br/> 
       <b>Last Name:</b><span>{this.context.appManager.User.LastName}</span><br/> 
      </div> 
    } 

}); 

var App = React.createClass({ 

    getInitialState() { 
    return { 
     User: { 
     FirstName: '', 
     LastName: '' 
     } 
    } 
    }, 
    childContextTypes: { 
     appManager: React.PropTypes.object 
    }, 
    getChildContext() { 
     return { 
      appManager: { 
       User: _.extend({}, this.state.User) 
      } 
     } 
    }, 
    setUserInfo() { 

    if (this.state.User.FirstName == 'Homer') { 
     this.setState({ 
     User: { FirstName: 'Peter', LastName: 'Griffin' } 
     }); 

    } else { 
     this.setState({ 
     User: { FirstName: 'Homer', LastName: 'Simpson' } 
     }); 
    } 
    }, 
    render() { 
    return <div> 
     <h1>My App!</h1> 
     <input type="button" value="Update User Stat!" onClick={this.setUserInfo} /> 
     <h3>Header Info</h3> 
     <AppHeader/> 
     <h3>The Content</h3> 
     <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus turpis, bibendum sit amet finibus nec, imperdiet ut nisi. Maecenas et orci vitae ante convallis iaculis at sit amet augue. Fusce est libero, interdum vitae interdum id, auctor eu ex. Donec pretium quis nibh et ornare. Donec sodales elit at vehicula rhoncus. In facilisis facilisis sem a tristique. Sed non nulla nec velit maximus aliquet sit amet vitae eros. In finibus tortor ut ipsum porttitor, et ullamcorper lorem facilisis. Sed porttitor turpis ac vulputate porta. Fusce gravida tellus elit, sed feugiat sapien tincidunt ut. Maecenas augue purus, dictum id eros a, tincidunt fringilla nisi. In eros neque, pulvinar ac velit vel, fermentum facilisis justo. Phasellus laoreet egestas tortor, id tincidunt eros tempus et. Morbi et diam ut ante sodales eleifend et eu lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec sodales eget ex sit amet interdum. 
     </p> 
     </div> 
    } 
}) 

export default App; 

对于上下文的工作，您需要在两个组件中进行设置。一个需要成为提供者，另一个需要成为接收者。就你而言，App组件需要通过使用childContextTypes属性和getChildContext方法定义上下文来为其子项提供上下文。

childContextTypes: { 
     appManager: React.PropTypes.object 
    }, 
    getChildContext() { 
     return { 
      appManager: { 
       User: _.extend({}, this.state.User) 
      } 
     } 
    }, 

然后在子组件将其标记为使用contextTypes财产，像这样的接收器：

contextTypes: { 
    appManager: React.PropTypes.object 
    }, 

通过这样做，你不直接通过道具这两个组件链接。子组件将能够使用this.context [无论您在父项中提供了什么，在这种情况下'appManager']。[在'appManager'上定义的任何方法或属性，在本例中为'User']

用户属性将是App组件中用户状态的副本。

User: _.extend({}, this.state.User) 

在此示例中，如果您单击该按钮，它将更改App组件中的状态，该状态将通过上下文更新所有子组件。为了看到这个行动，我做了一个webpackbin you to play with。

只有当你不知道你的孩子会是什么，但仍然需要提供数据时，这是有用的。更简单的解决方案是将用户作为道具直接传递给孩子。