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

【问题标题】：How to easily add reusable component into a list?如何轻松地将可重用组件添加到列表中？
【发布时间】：2021-09-14 14:20:53
【问题描述】：

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

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 的可重用组件的正确方法吗？

【问题讨论】：

标签： javascript reactjs components reusability

【解决方案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>
  );
}

【讨论】：