檢索元素的關鍵在陣營

在我創建了一個陣營組成部分，我有這樣的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 –

檢索元素的關鍵在陣營

回答

相關問題