Oluşturduğum bir tepki bileşeninde

Question

Tepki de öğenin anahtarı al, ben render yöntem dönüş değeri içinde bu var:

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

Bir anahtar belirtmek olmadıysa

, bunu yapmak için beni uyardı React. Ben de yaptım. umut

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

Oluşturduğum <div> anahtar özelliği alabilirsiniz: Sonra onClick olay işleyicisi belirtildi. Ancak bu çalışmaz (e.target için bazı HTML çıktısı alıyorum ama e.target.key için hiçbir şey). key özniteliğini tıklattığım bir öğeden nasıl alabilirim?

Answer 1

Ayarladığınız anahtar özellik değerini elde etmenin en iyi yolu, bir anlamı olduğu gibi başka bir özellik de iletmektir. Örneğin, sık sık bunu:

const userListItems = users.map(user => { 
    return <UserListItem 
    key={ user.id } 
    id={ user.id } 
    name={ user.name } 
    }); 

ya sizin durumda

: Bu gereksiz görünüyor, ama key şey anlamına gelebilir tamamen tepki uygulama kavramı, çünkü onun daha açık düşünmek

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

Neredeyse her zaman key değerlerim olarak benzersiz kimlikler kullanmama rağmen id'dan farklı. Nesneyi başvuruyorsanız, id olmasını istiyorsanız, bunu iletmeniz yeterlidir.