Javascript 创建可以从数组中的每个元素接收参数的函数的其他方法？

假设我有一个函数renderList和handleClick，它是

handleClick = name => {
   alert(name);
}


renderList(){
   var list = [{name:'name1',age:1},{name:'name2',age:2},{name:'name3',age:3}]

   return(
      <ul>
      {list.map(x =>
         <li>
            {x.name + " ---> " + x.age}
            <div onClick = {()=>{this.handleClick(x.name)}}>
               Click Me
            </div>
         </li>
      )}
      </ul>
   );

}

handleClick=name=>{
警报（名称）；
}
renderList（）{
var list=[{name:'name1'，age:1}，{name:'name2'，age:2}，{name:'name3'，age:3}]
返回(

{list.map（x=>

{x.name+“-->”+x.age}
{this.handleClick（x.name）}>
点击我

)}

);
}

当我单击“click Me”div时，它会提醒被单击元素的名称，但在该div中使用onClick的箭头函数意味着每个元素都有自己的函数，我不希望这样

其他解决办法是：

handleClick = event => {
       alert(event.target.id);
    }


renderList(){
   var list = [{name:'name1',age:1},{name:'name2',age:2},{name:'name3',age:3}]

   return(
      <ul>
      {list.map(x =>
         <li>
            {x.name + " ---> " + x.age}
            <div id = {x.name} onClick = {this.handleClick}>
               Click Me
            </div>
         </li>
      )}
      </ul>
   );

}

handleClick=event=>{
警报（event.target.id）；
}
renderList（）{
var list=[{name:'name1'，age:1}，{name:'name2'，age:2}，{name:'name3'，age:3}]
返回(

{list.map（x=>

{x.name+“-->”+x.age}
点击我

)}

);
}

这样，通过给div一个id，我可以用第一个代码获得相同的结果。但假设还有另一种情况，当我需要传递其他参数时，我不能给div的id

所以问题是，有没有其他方法可以在不使用上述两种方法的情况下实现相同的结果

---

（此问题与中的另一个问题相关）

为每个项目使用唯一的id，以便可以在数组中找到相关条目。 使用这种技术，您只需将id附加到DOM，然后使用它从您的状态获取数据。 在您的情况下，让我们假设

name

是唯一的：

类演示扩展了React.Component{
状态={
项目：[{name:'name1'，年龄：1}，{name:'name2'，年龄：2}，{name:'name3'，年龄：3}]
};
handleClick=事件=>{
const item=this.state.items.find（x=>x.name==event.target.id）；
控制台日志（项目）；
};
render（）{
返回(
{this.state.items.map（{name，age}）=>

姓名：{name}年龄：{age}
点击我

)}
);
}
}
ReactDOM.render（，document.getElementById（'app'））
为每个项目使用唯一的id，以便可以在数组中找到相关条目。
使用这种技术，您只需将id附加到DOM，然后使用它从您的状态获取数据。
在您的情况下，让我们假设
name
是唯一的：


类演示扩展了React.Component{
状态={
项目：[{name:'name1'，年龄：1}，{name:'name2'，年龄：2}，{name:'name3'，年龄：3}]
};
handleClick=事件=>{
const item=this.state.items.find（x=>x.name==event.target.id）；
控制台日志（项目）；
};
render（）{
返回(
{this.state.items.map（{name，age}）=>

姓名：{name}年龄：{age}
点击我

)}
);
}
}
ReactDOM.render（，document.getElementById（'app'））
另一个选项是在不向DOM中放入任何不必要的内容的情况下，在单击时检查父级
ul
中单击元素的
li
索引：


类列表扩展了React.Component{
列表=[{name:'name1'，年龄：1}，{name:'name2'，年龄：2}，{name:'name3'，年龄：3}]
handleClick=（{target}）=>{
const li=target.parentElement；
const index=Array.prototype.indexOf.call（li.parentElement.children，li）；
console.log（this.list[index].name）；
}
render（）{
返回(

{this.list.map（x=>

{x.name+“-->”+x.age}
点击我

)}

);
}
}
//渲染它
ReactDOM.render(
,
容器
);
另一个选项是在不向DOM中放入任何不必要的内容的情况下，在单击时检查父级
ul
中单击元素的
li
索引：


类列表扩展了React.Component{
列表=[{name:'name1'，年龄：1}，{name:'name2'，年龄：2}，{name:'name3'，年龄：3}]
handleClick=（{target}）=>{
const li=target.parentElement；
const index=Array.prototype.indexOf.call（li.parentElement.children，li）；
console.log（this.list[index].name）；
}
render（）{
返回(

{this.list.map（x=>

{x.name+“-->”+x.age}
点击我

)}

);
}
}
//渲染它
ReactDOM.render(
,
容器
);

如果您还有其他想法，请告诉我。Thanks@Kevin钱德拉，我现在没有别的想法了@Kevin Chandra，只是一个警告，我更喜欢使用
数据id
而不是
id
，以避免id冲突，因为id对于整个页面必须是唯一的，所以在不同的列表中如果您有其他想法，请让我知道。Thanks@Kevin钱德拉，我现在没有别的想法了@Kevin Chandra，这只是一个警告，我更喜欢使用
数据id
而不是
id
，以避免id冲突，因为id对于整个页面以及不同列表都必须是唯一的