javascript - 如何自定义嵌套组件？

Question

如何自定义嵌套组件？

我正在使用 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 来直接向它们传递操作，但我更喜欢这些组件保持纯粹和灵活。

关于如何以干净的方式解决这个问题有什么建议吗？

谢谢，然。

Answer 1

您可以将组件作为 Prop 传递。

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