单击内部属性时如何获取父对象的索引

Question

我有一个对象对象：

[
0: {
id: 0,
name: 'Bob',
children: [
0: { id: 0, parent: 'Bob', 'name': 'Susan'},
1: { id: 1, parent: 'Bob', 'name': 'David'},
]
},
1: {
id: 1,
name: 'Christine',
children: [
0: { id: 0, parent: 'Christine', 'name': 'Iker'},
1: { id: 1, parent: 'Christine', 'name': 'Ray'},
2: { id: 2, parent: 'Christine', 'name': 'Milo'},
]
},
]

我有一个呈现所有子项的列表，并且我在它们上有一个onClick。当我单击单个子对象本身时，如何获取父对象的索引？我下面的内容只返回孩子本身的索引。

<div onClick={() => handleAddChild(id, index)}>
<p>{child.name}</p>
</div>

基本上，当我单击一个子对象时，我想获取该子对象的父对象的索引，以便使用setState((更新该特定父对象的子对象列表。因此，如果我单击Iker，我应该得到Christine对象的索引1，然后使用此方法更新状态(但我的方法是动态的(：https://stackoverflow.com/a/49502115/10211209.如果有其他方法可以通过匹配父名称属性来实现这一点？

谢谢！

Answer 1

如果您首先循环并呈现父级，然后呈现子级。您可以直接通过父索引作为一个附加参数。例如

return this.parents.map((item, parentIndex) => (
<span className="parent" key={index}>
{item.children.map((child, index) => {
<div onClick={() => handleAddChild(child.id, index, parentIndex)}>
<p>{child.name}</p>
</div>
})}
</span>
));