如何自定义嵌套组件?
我正在使用 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
来直接向它们传递操作,但我更喜欢这些组件保持纯粹和灵活。
关于如何以干净的方式解决这个问题有什么建议吗?
谢谢, 然。
最佳答案
您可以将组件作为 Prop 传递。
render() {
var passedButton = (<FollowButtton />);
var row = (<UserCard button={passedButton} />);
return (
<UserList rowComponent={row}/>
);
};
关于javascript - 如何自定义嵌套组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33669407/