Reactjs 检索循环中每个子级的道具以使用值作为键

我有两个组件（为了简单起见，我将它们称为

和

），第二个组件在其道具之间包含一个

id

。我在

组件（见下文）中有一个循环，需要为循环的列表项分配一个键。有没有一种方法可以在map函数中检索单个项的id

//App.jsx
<List>
  <ListItem id={adjsaiewwqa}/>
  <ListItem id={adssandsadn}/>
</List>

//List.jsx
<div className="css-classes">
 {props.children?.map(child => 
   <div key={/*HERE I WANT TO INSERT LIST ITEM ID*/} className="other-css-classes">
     {child}
   </div>
 }
</div>

//App.jsx
//List.jsx
{props.children？.map（child=>
{child}
}

编辑：出现此问题是因为我在react props中使用ReactNode[]作为子类型。当子元素的内容是元素数组时，应使用react。应改用元素[]

---

之后，通常可以在子项上调用道具。

解决方案

您的

List.jsx

应该是：

 <div className="css-classes">
      {props.children?.map((child) => (
        <div key={child.props.id} className="other-css-classes">
          {child}
        </div>
      ))}
 </div>

Property 'props' does not exist on type 'string | number | boolean | {} | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<...>)> | ReactNodeArray | ReactPortal'.
  Property 'props' does not exist on type 'string'.