在另一个div中呈现React组件

Question

在React中是否可以像这样在div中渲染另一个组件?键在div上吗?

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

Answer 1

如果Person已经返回jsx，那么如果数据中已经有id，则可以这样做:

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

如果没有，你可以使用Ankit Sanghvi的技巧:

dataArray.map((data, idx) => <Person key={data.idx} data={data} />)

这样做可以消除额外的嵌套div。从你的例子中，我感觉到你认为你需要div来保存地图中的键，但实际上你没有。

Answer 2

是。你的方法是正确的。为此，dataArray中的每个数据对象必须有一个称为id的字段(或者您可以使用其他UUID值)。否则，一种更简单的方法是使用迭代数组中的对象索引:

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

Answer 3

是的，这是通常遵循的方法。但是，您应该始终使用key属性，否则react将在控制台中给出警告。

您可以考虑以下操作:-

dataArray.map((data, index) => {
return (
<div key = {index}>
<Person data = {data} />
</div>
)
})