检索元素的关键在阵营

在我创建了一个阵营组成部分，我有这样的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>)

如果我没有指定键，反应告诫我这样做。所以我做了。那么我指定onClick事件处理程序：

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

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

来源

2016-02-08 daremkd

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

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当你引用的对象，只是把它传递英寸

来源

2016-02-09 00:07:54

什么是有“钥匙”作为内部反应实现的呢？是否应用程序中的所有元素都需要不同的键或map（）范围内的元素？ – daremkd

'key'属性由react使用，以确保dom元素与数据对象相对应。你可以阅读更多有关动态的孩子在这里作出反应：https://facebook.github.io/react/docs/multiple-components.html –

检索元素的关键在阵营

回答

相关问题