Reactjs 通过字典数组进行映射，然后在组件中作为道具传递值

这是父组件的当前代码：

return (
   <div>
     <SideBarField name={"Dashboard"} icon={"fa fa-th-large"}/>
     <SideBarField name={"My Calendar"} icon={"fa fa-calendar"}/>
   </div>
   )

 <li class="active">
     <a href="dashboard_2.html"><i className={`${props.icon}`}></i> 
        <span class="nav-label">{props.name}</span>
     </a>
 </li>

如何编写映射函数，在这里，我将为每个迭代选择名称和图标，并传递给这个组件

  <SideBarField name={data from array} icon={data from array}/>

 <li class="active">
     <a href="dashboard_2.html"><i className={`${props.icon}`}></i> 
        <span class="nav-label">{props.name}</span>
     </a>
 </li>

只需使用

.map（）

函数并在子组件内传递值即可<之所以使用code>idx，是因为对象的

字段
数组没有任何唯一的
ID
，并且在
.map（）
中使用组件时，根组件需要一个
键

<div>
  {fields.map((field, idx) => (
    <SideBarField key={idx} name={field.name} icon={field.icon}/>
  ))}
</div>


{fields.map（（field，idx）=>(
))}
只需使用
.map（）
函数并在子组件内传递值即可<之所以使用code>idx
，是因为对象的
字段
数组没有任何唯一的
ID
，并且在
.map（）
中使用组件时，根组件需要一个
键

<div>
  {fields.map((field, idx) => (
    <SideBarField key={idx} name={field.name} icon={field.icon}/>
  ))}
</div>


{fields.map（（field，idx）=>(
))}
返回(
{
fields.map（（field，i）=>）
}
)

子组件中的

  <SideBarField name={data from array} icon={data from array}/>

 <li class="active">
     <a href="dashboard_2.html"><i className={`${props.icon}`}></i> 
        <span class="nav-label">{props.name}</span>
     </a>
 </li>



返回(
{
fields.map（（field，i）=>）
}
)

子组件中的

  <SideBarField name={data from array} icon={data from array}/>

 <li class="active">
     <a href="dashboard_2.html"><i className={`${props.icon}`}></i> 
        <span class="nav-label">{props.name}</span>
     </a>
 </li>



谢谢它在工作：）谢谢它在工作：）