तत्व की कुंजी को पुनः प्राप्त

Question

प्रतिक्रिया में एक घटक प्रतिक्रिया मेरे द्वारा बनाए गए में, मैं 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> प्रमुख विशेषता मैं बनाया मिल सकती है। यह काम नहीं करता है, हालांकि (मुझे 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 से अलग, भले ही मैं लगभग हमेशा अपने key मानों के रूप में अद्वितीय आईडी का उपयोग करता हूं। यदि आप ऑब्जेक्ट का संदर्भ देते हैं तो id रखना चाहते हैं, तो बस इसे पास करें।