如何轻松地将可重用组件添加到列表中？

Question

我正在使用 React 构建一个投资组合网站，该网站将列出我所有的项目和未来的项目。我想知道这是否是将新项目条目轻松添加到我的网站的正确方法。我的想法是我有一个可重用的组件，它接受一个对象 prop

export default function ProjectEntry({projectInformationProp}){
    <div>{projectInformationProp.name}</div>
    <div>{projectInformationProp.stack}</div>
    <div>{projectInformationProp.description}</div>
    <div>{projectInformationProp.github}</div>
}

每次我想添加一个新条目时，我都会将一个新的“ProjectEntry”放入该项目列表组件中。该组件会将对象列表作为道具，每个对象都包含有关特定项目的信息。

export default function ProjectList({projectList}){
    <ul>
        <li>
            <ProjectList projectList[0]={projectInformationProp} />
        </li>
        <li>
            <ProjectList projectList[1]={projectInformationProp} />
        </li>
        <li>
            <ProjectList projectList[2]={projectInformationProp} />
        </li>
    </ul>
}

这将是对象列表，因此如果将来我想添加到我的最新项目中，我只需添加一个包含新信息的新对象。

let projectList=[
    {name:project1, stack:javascript, description:good, github:link},
    {name:project2, stack:python, description:bad, github:link},
    {name:project3, stack:C++, description:okay, github:link},
]

我认为这是使用 React 的可重用组件的一种不错的方法，对吗？

Answer 1

您需要使用 map 遍历数组以创建新的组件数组：

export default function ProjectList({ projectList }){
  <ul>
    {projectList.map(obj => <ProjectEntry data={obj} />)
  </ul>
}

然后使用您在每次迭代中传入的对象数据来创建 <ProjectEntry>:

export default function ProjectEntry({ data }) {
  return (
    <li>
      <div>{data.name}</div>
      <div>{data.stack}</div>
      <div>{data.description}</div>
      <div>{data.github}</div>
    </li>
  );
}

如何轻松地将可重用组件添加到列表中？

How to easily add reusable component into a list?

javascript

components

reusability

reactjs