如何自定义嵌套组件? [英] How to customize nested components?

问题描述

如何自定义嵌套组件?

我正在使用 Redux 构建 React Native 应用程序.我的应用中有三个显示用户列表的屏幕.

I'm building React Native app with Redux. I have three screens in my app that render list of users.

Follower/Following 应该显示 FollowButton:

Follower/Following should show 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>

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

Search Results should not show any button

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

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

As you can see, all three screens uses UserList and UserCard components.

目前UserList和UserCard需要知道onFollow onUnfollow 和onAsk动作以及如何传递它们.

Currently UserList and UserCard needs to know about onFollow onUnfollow and onAsk actions and how to pass them around.

这会变得很复杂，而且不是很灵活.

This can get complicated and not very flexible.

理想情况下，我想做类似的事情:

Ideally I want to do something like:

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

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

But how do I pass the actions from the top level component into the actual button? and How do I know which actions to pass?

我可以在实际按钮上使用 connect 直接将操作传递给它们，但我更喜欢这些组件保持纯净和灵活.

I could use connect on the actual buttons to pass them the actions directly but I prefer these components stay pure and flexible.

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

Any suggestion on how to solve it in a clean way?

谢谢，跑了.

推荐答案

您可以将组件作为 prop 传递.

You can pass components as a prop.

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

这篇关于如何自定义嵌套组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！