如何自定义嵌套组件？答案

【问题标题】：How to customize nested components?如何自定义嵌套组件？
【发布时间】：2015-11-12 10:33:24
【问题描述】：

如何自定义嵌套组件？

我正在使用 Redux 构建 React Native 应用程序。我的应用中有三个屏幕可以呈现用户列表。

关注者/关注者应该显示FollowButton：

<FollowersContainer> 
  <UserList onFollow={func} onUnfollow={func} users={[...]}>
    <UserCard user={user} onFollow={func} onUnfollow={func}>
      <FollowButton onFollow={func} onUnfollow={func} isFollowing={bool} userId={string} />
    </UserCard>
  </UserList>
</FollowersContainer>

提问屏幕应该显示AskButton:

<AskQuestionContainer> 
  <UserList onAsk={func} users={[...]}>
    <UserCard user={user} onAsk={func}>
      <AskButton onPress={onAsk} />
    </UserCard>
  </UserList>
</AskQuestionContainer>

搜索结果不应显示任何按钮

<SearchResultsContainer> 
  <UserList users={[...]}>
    <UserCard user={user} />
  </UserList>
</SearchResultsContainer>

如您所见，所有三个屏幕都使用UserList 和UserCard 组件。

目前UserList 和UserCard 需要了解onFollow 和onUnfollow 和onAsk 操作以及如何传递它们。

这可能会变得复杂且不太灵活。

理想情况下，我想做这样的事情：

<UserList 
  rowComponent={
    <UserCard button={<FollowButton />} />
  }
/>

但是如何将顶级组件中的操作传递到实际按钮中呢？以及我如何知道要传递哪些操作？

我可以在实际按钮上使用connect 直接向它们传递动作，但我更喜欢这些组件保持纯粹和灵活。

关于如何以干净的方式解决它的任何建议？

谢谢，冉。

【问题讨论】：

标签： javascript reactjs react-native redux

【解决方案1】：

您可以将组件作为道具传递。

render() {
  var passedButton = (<FollowButtton />);
  var row = (<UserCard button={passedButton} />);
  return (
    <UserList rowComponent={row}/>
  );
};

【讨论】：

我知道我可以做到，FollowButton 需要从 UserList 获取他的道具，如果父母不知道他所有的孙子孙女，我无法找到传递这些道具的方法