在React中将组件渲染在div内部是否可行？map循环时key要放在div上吗？

1. 组件嵌套在div内部的写法是否符合规范 #

这种写法完全符合React官方规范，没有问题。

• React没有对组件的外层包裹元素做强制限制，你可以根据布局、样式、语义化的需求，选择用div、其他原生DOM元素甚至自定义组件来包裹<Person>组件。
• 如果你不需要额外的外层DOM节点，也可以用React.Fragment（简写为<></>）来包裹，避免生成多余的DOM元素。

2. key属性的放置是否正确 #

你当前的写法是完全正确的：

• React要求key属性必须绑定在循环渲染返回的最外层根节点上。你这段代码中map每次迭代返回的根节点是div，所以key放在这个div上符合规范。
• 如果后续你去掉了外层div，直接返回<Person>组件，那key就需要绑定在<Person>组件上，示例如下：

dataArray.map((data) => {
  return <Person key={data.id} data={data} />
})

内容的提问来源于stack exchange，提问作者westie