Question

在我创建的React组件中，我在render方法返回值中有这个：

this.props.albums.map(function(albumDetails, id) {
    return (<div className="artistDetail" key={id} onClick={component.getTracks}>
        <img src={albumDetails.imageSrc} />
        <p><a href="#" >{albumDetails.name}</a></p>
    </div>)

如果我没有指定密钥，React警告我这样做。所以我做了。然后我指定了onClick事件处理程序：

getTracks: function (e) {
   console.log(e.target.key);
},

希望我能获得我创建的<div>键属性。但这不起作用（我为e.target获取了一些HTML输出，但e.target.key没有。如何从我点击的元素中获取key属性？

Answer 1

获取您设置的键属性值的最佳方法是将其作为具有意义的另一个属性传递。例如，我经常这样做：

const userListItems = users.map(user => {
  return <UserListItem
    key={ user.id }
    id={ user.id }
    name={ user.name }
  });

或在你的情况下：

this.props.albums.map(function(albumDetails) {
  return (<div className="artistDetail" key={albumDetails.id} data-id={ albumDetails.id } onClick={component.getTracks}>
      <img src={albumDetails.imageSrc} />
      <p><a href="#" >{albumDetails.name}</a></p>
  </div>)

这似乎是多余的，但我认为它更明确，因为key是一个纯粹的反应实现概念，可能意味着与id不同，即使我几乎总是使用唯一ID作为我的{{ 1}}值。如果您想在引用对象时使用key，只需将其传入。

Answer 2

该键仅供React内部使用，不会显示在HTML和控制台中，您只需要使用id即可检索该唯一组件。例如：

getTracks: function (e) {
   console.log(e.target.id?e.target.id:e.target);
}

this.props.albums.map(function(albumDetails) {
  return (<div key id={ albumDetails.id } onClick={component.getTracks} className="artistDetail" >
      <img src={albumDetails.imageSrc} />
      <p><a href="#" >{albumDetails.name}</a></p>
  </div>)
}

而且您也不需要将值传递给key属性。Value完全是可选的。

在React中检索元素的键

2 个答案: