如何在 React 中构建通用列表组件

问题描述

我正在构建一个呈现 4 个列表的用户配置文件：

1. 评论
2. 已保存的帖子。
3. 已创建帖子
4. 活跃帖子。

2-4 是呈现相同组件的列表，1 是呈现不同组件的列表 - ReviewCard。

据我所知，有一些方法可以使通用组件按类型或类似方式呈现组件列表。 每个列表也有它自己的状态和其他子组件，例如评论中的星级容器，而其他列表中不存在。 现在我的代码非常混乱：

    useEffect(() => {
        if (type === 'reviews') {
            fetchReviews()
        }
        dispatch(fetchNewRoom())
    },[])

    useEffect(() => {
        setinitialMessages(messages?.slice(0,3))
    },[messages])

    useEffect(() => {
        setinitialRooms(rooms?.slice(0,[rooms])

其中房间、评论和消息是我想在个人资料上呈现的 3 个列表。我相信有更好的做法。 讨论想法会很棒。 感谢您的帮助

解决方法

在您的用例中，有四个列表可以在容器内呈现，其中容器将具有列表和通用配置。如果存在不恒定的配置，则传递 props 并相应地处理它。下面是代码片段。

//下面是列表容器

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" />
      )
    }