は、私が作成したリアクトコンポーネントで

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

、そうするために私に警告反応します。だから私はやった。私は、私が作成した<div>キー属性を取得することができます期待して

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

：私はその後onClickイベントハンドラを指定しました。しかし、これはうまくいきません（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 } 
    }); 

またはあなたのケースで

：それは冗長なようだが、 keyが何かを意味するかもしれない、純粋に反応し、実装のコンセプトは、あるので、私は、より明示的な思い

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とは異なります。オブジェクトを参照するときにidが必要な場合は、それを渡します。