Reactjs 保存有关div的信息，并在单击事件时检索该信息

假设我有一个5个整数的数组

[1,2,3,4,5]

我迭代数组并创建5个div。在每个div上，我希望有一个onClick处理程序。因此，当我点击一个div时，我想检索这个数字

存储信息的最佳方式是什么，以便稍后我可以从处理程序函数中检索信息

我已经尝试了下面的方法，但我不确定这是否是最好的解决方案，因为在我的应用程序中，我会有大量的div

const array = [1,2,3,4,5];

// make a closure
function onDivClick(id) {
    return () => {
      console.log(id);
    }
  }


return (

<div> 

{array.map( id => {
   return <div onClick={onDivClick(id)}> ... </div>
})

</div>
)

常量数组=[1,2,3,4,5]；
//了结
函数onDivClick（id）{
return（）=>{
console.log（id）；
}
}
返回(
{array.map（id=>{
返回。。。
})
)

我还看到了html数据属性：

因此，我可以使用

event.target.getAttributes（'data-id'）

存储和检索它

---

还有其他方法吗？哪种方法最好？

您现在拥有的不好。

{onDivClick（id）}

在每次渲染时执行

相反，将

id

属性直接添加到div中，并在单击处理程序中访问它

重写单击处理程序，如下所示：

function handleClick(event) {
  let id = event.target.id;
  console.log(id);
}

并将其连接到div，如下所示：

<div id={id} onClick={handleClick} />

这类问题通常更适合被问到：为什么不将其存储为状态并通过处理程序检索？似乎有一种更传统的方法来实现这一点。@AttemptedMastery您能提供一个例子吗？我知道状态，但我不确定如何检索处理程序！我如何才能知道是哪种方法按下h div以检索正确状态？可能需要一段时间，但当我找到时间时，我将尝试返回！@AttemptedMastery我将等待您的回答。因为我不确定如何确定按下哪个div以检索正确状态！