如何在React中生成泛型列表组件
如何在React中生成泛型列表组件
提问于 2021-05-12 11:05:19
我正在构建一个呈现4个列表的用户配置文件：
- reviews
- saved posts.
- 创建了
- 活动帖子.
2-4是呈现相同组件的列表，1是呈现不同组件- ReviewCard的列表。
据我所知，有一些方法可以使泛型组件按类型或类似的类型呈现组件列表。每个列表都有自己的状态和额外的子组件，比如评论中的星型容器，而其他的则不存在。现在，我的代码非常混乱：
useEffect(() => {
if (type === 'reviews') {
fetchReviews()
}
dispatch(fetchNewRoom())
}, [])
useEffect(() => {
setInitialMessages(messages?.slice(0, 3))
}, [messages])
useEffect(() => {
setInitialRooms(rooms?.slice(0, 3))
}, [rooms])其中的房间，评论和信息是3个列表，我想呈现在个人资料。我相信有一个更好的做法。很乐意讨论一些想法。谢谢你的帮助
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-05-12 11:37:48
在您的用例中，有四个列表可以在容器中呈现，容器将在其中具有list和公共配置。如果存在非常量的配置，则传递道具并相应地处理它。下面是代码片段。
//下面是列表容器
const ListContainer = (props) => {
const { listData } = props
const getListItem = (type) => {
switch(type) {
case 'review':
return <review/>
case 'spost'
return <spost/>
case 'cpost'
return <cpost/>
case 'apost'
return <apost/>
default:
return null;
}
}
return (
<div>
{listData.map((item) => {
return getListItem(item.type)
})}
</div>
)
}//这是配置文件组件，您可以在其中同时呈现4个列表。
import ListContainer from './listContainer'
const Profile = () => {
return (
<ListContainer type="review" />
<ListContainer type="spost" />
<ListContainer type="cpost" />
<ListContainer type="apost" />
)
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67502404
复制相关文章
相似问题
腾讯云开发者
