reactjs - 在 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>)

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

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

希望我能得到<div>我创建的关键属性。然而，这不起作用(我得到了 e.target 的一些 HTML 输出，但没有 e.target.key 的任何 HTML 输出)。我怎样才能得到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 是一个纯粹的 React 实现概念，这可能意味着与 id 不同的东西，即使我几乎总是使用唯一 ID 作为我的key 值。如果你想在引用对象时有id，只需将其传入即可。