如何从带有子元素的数组中附加反应 div 元素？以及如何为映射的父元素提供唯一的“关键”道具

如何解决如何从带有子元素的数组中附加反应 div 元素？以及如何为映射的父元素提供唯一的“关键”道具

  const group = []
  for (let i = 0; i < 4; i++) {
      group.push(<div className="parent"></div>)
  }

  return (
    <>
      {group.map((item,i) => item )}
    </>
  );
}

这里的 item 将是 div 类名为“parent”的元素，我想在其中放入一个元素，并且我想给每个 item 一个唯一的键。 （我尝试从箭头函数返回：<item key={i}> <div className="child"></div> </item>）

解决方法

为此，您的推送应添加一个函数组件，该组件还在内部渲染 children 道具：

  const group = []
  for (let i = 0; i < 4; i++) {
      group.push((props) => <div className="parent">{props.children}</div>)
  }

  return (
    <>
      {group.map((Item,i) => <Item key={i}><div className="child">child {i}</div></Item> )}
    </>
 );