假设您使用此组件结构进行聊天:
<ChatApp> <CurrentUserInfo>...</CurrentUserInfo> <ChatsPanel>...</ChatsPanel> <SelectedChatPanel> <MessagesList> <MessageBaloon> <MessageText></MessageText> <MessageUserHead></MessageUserHead> </MessageBaloon> ... </MessagesList> <SelectedChatPanel> </ChatApp>
和一个Redux状态如:
{ currentUser: ..., chatsList: ..., selectedChatIndex: ..., messagesList: [ ... ] }
您如何使当前用户信息可用于<MessageUserHead>组件(它将为每条消息呈现当前用户缩略图),而不必从根组件一直到所有中间组件一直传递它?
<MessageUserHead>
以同样的方式,您将如何使诸如当前语言,主题等信息可用于组件树中的每个表示/哑组件,而又无需暴露整个状态对象?
要获取所有“哑巴”组件的全局信息,可以使用react上下文。
人为的例子
// redux aware component var ChatApp = React.createClass({ childContextTypes: { language: React.PropTypes.string }, getChildContext: function() { // or pull from your state tree return {language: "en"}; }, ... } // dumb components var ExDumb = React.createClass({ contextTypes: { language: React.PropTypes.string }, render: function() { var lang = this.context.language; return ( <div /> ); } });
为了回应评论,redux 在其react-redux库中使用了这种上下文方法。
更抽象地说,在react之外使用时,可以在状态树上使用某种pluck或选择器函数,并且仅返回哑组件所需的全局状态的子集。