在React中检索元素的键

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>我创建的 关键属性.但这不起作用(我得到了一些HTML输出,e.target但没有任何用处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作为我的key值.如果您想id在引用对象时拥有它,只需将其传入即可.