React中map渲染的Button绑定onClick时如何获取genre.id

以下是两种常用的实现方案：

• 方案1：箭头函数直接传参（最常用，适合绝大多数场景）
  直接在onClick处通过匿名箭头函数包裹回调，将genre.id作为参数传入即可，修改你的map遍历部分代码如下：

osa.map((genre) => (
  <Button 
    key={genre.id} 
    {...genre} 
    onClick={() => thisFunction(genre.id)} 
  />
))

对应的回调函数直接接收参数即可：

const thisFunction = (genreId) => {
  // 此处即可获取到当前点击项对应的genre.id
  console.log('选中的分类id：', genreId)
}

• 方案2：通过自定义data属性获取（适合列表项极多、对性能要求高的场景）
  给Button组件添加自定义data属性存储id，回调函数中从事件对象里读取属性值，避免每次渲染生成新的函数实例：

osa.map((genre) => (
  <Button 
    key={genre.id} 
    {...genre} 
    data-genre-id={genre.id}
    onClick={thisFunction} 
  />
))

对应的回调函数写法：

const thisFunction = (e) => {
  const genreId = e.currentTarget.dataset.genreId
  console.log('选中的分类id：', genreId)
}

注意：如果使用React类组件，回调函数如果不是箭头函数定义的，需要提前在constructor中绑定this，避免this指向异常。

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