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

Question

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

评论
已保存的帖子。
创建的帖子
活跃帖子。

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 个列表。我确定有更好的做法。讨论想法会很棒。感谢您的帮助

Answer 1

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

//下面是列表容器

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

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

How to build a generic list component in React

reusability

custom-lists

reactjs