在同一个组件中映射和渲染两个不同的数组 - React

Question

我刚开始学习 React，但在理解如何在同一个组件中映射和渲染两个不同的数组时遇到了问题。在我的 CMS 中，我有 3 个条目，每个条目都包含一个标题和一个描述。我使用 var data 从 GraphQL 调用它们。组件SectionLeft 有一个以threeFeatures 作为类名的网格容器。在我的主页中，我使用道具bottomcontent 将内容传递给网格容器。我在数组中传递组件SingleFeature，这是我的网格列，将包含一个图标、一个标题和一个描述，它将重复 3 次并组成我的 3 列 x 1 行网格。组件SingleFeature 具有属性children，它应该包含常量iconList 的数组映射，其中包含3 个不同的svg 图标组件。我不明白如何为组件SingleFeature 编写一个多数组映射，它将为道具feature 和details 显示下面显示的相同data 数组，但将为children 渲染3 个组件在数组中。任何解释将不胜感激。谢谢。

homepage.js

import IconOne from "../components/icons/icon-one"

import IconTwo from "../components/icons/icon-two"

import IconThree from "../components/icons/icon-three"

export const iconList = [IconOne, IconTwo, IconThree]

export default function Home({data}) {

  return (
    <div>
      <SectionLeft bottomcontent =

      {data.allContentfulHomepageWordpressFeatures.edges.map(edge => (

          <SingleFeature
          
          children = {
            ...iconList array...
          }
          feature = {
            edge.node.feature
          }
          details = {
            edge.node.description
          }
          />

        ))
      }
     />
   );
}

section-left.js

export default function SectionLeft(props) {

    return (
                <div className="threeFeatures">{props.bottomcontent}</div>

    );
}

single-feature.js

export default function SingleFeature(props) {
    return(
        <div>
        {props.children}
        <h3>{props.feature}</h3>
        <p>{props.details}</p>
        </div>
    );
}

GraphQL 查询

export const query = graphql`

  allContentfulHomepageSpeedFeatures {
    edges {
      node {
        feature
        description
      }
    }
  }

}

`

Answer 1

我会这样做：

data.allContentfulHomepageWordpressFeatures.edges.map((edge, index) => (

      <SingleFeature
      
      children = {
        iconList[index]
      }
      feature = {
        edge.node.feature
      }
      details = {
        edge.node.description
      }
      />

    ))

map 将映射数组中元素的索引作为第二个参数传递给箭头函数。