如何定制嵌套组件？

Question

如何定制嵌套组件？

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

Follower/Follower应显示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

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

​

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

​