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

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

＆＃13;

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

＆＃13;

如何自定义嵌套组件？

1 个答案: