如何在IF语句中引用React图片元素实现歌曲切换？

开发音乐播放器组件时，尝试为歌曲封面图片添加点击事件，期望点击不同图片切换对应播放歌曲。目前单首歌曲切换逻辑正常，但不清楚如何在if语句中定位引用对应的图片标签，导致批量切换功能未实现。简化后的代码如下：

function getSong() {
  let songFile = songs.map(song => song.songFile)
  
  // 不知道这里该填什么来引用对应的图片
  if ('Reference to Rap img') {
      setSongClicked(songFile[0])
  } else if ('Reference to Rock img') {
    setSongClicked(songFile[1])
  } else if ('Reference to Trending img') {
    setSongClicked(songFile[2])
  } else if ('Reference to Jazz img') {
    setSongClicked(songFile[3])
  }
}

return (
  <div className="song-main-container">
    <div className="song-container">
      <img src={Rap} onClick={getSong} />
      <img src={Rock} onClick={getSong}/>
    </div>
    <div className="song-container">
      <img src={Trending} onClick={getSong} />
      <img src={Jazz} onClick={getSong}/>
    </div>
  </div>
)

不推荐通过DOM元素引用做if判断（路径易变、代码冗余），更简洁可靠的方式是直接给点击事件传递对应歌曲的索引或数据：

方法1：传递歌曲索引（最推荐） #

修改getSong函数接收索引参数，直接通过索引定位歌曲文件，同时在每个img的点击事件中传入对应索引：

function getSong(songIndex) {
  let songFile = songs.map(song => song.songFile)
  setSongClicked(songFile[songIndex])
}

return (
  <div className="song-main-container">
    <div className="song-container">
      {/* 点击时传入对应歌曲的索引 */}
      <img src={Rap} onClick={() => getSong(0)} />
      <img src={Rock} onClick={() => getSong(1)}/>
    </div>
    <div className="song-container">
      <img src={Trending} onClick={() => getSong(2)} />
      <img src={Jazz} onClick={() => getSong(3)}/>
    </div>
  </div>
)

方法2：通过事件对象获取DOM元素（不推荐） #

如果一定要用if判断DOM元素，可以利用事件对象e获取点击的图片元素，通过对比src属性来区分：

function getSong(e) {
  let songFile = songs.map(song => song.songFile)
  const imgSrc = e.target.src
  
  if (imgSrc.includes(Rap)) {
    setSongClicked(songFile[0])
  } else if (imgSrc.includes(Rock)) {
    setSongClicked(songFile[1])
  } else if (imgSrc.includes(Trending)) {
    setSongClicked(songFile[2])
  } else if (imgSrc.includes(Jazz)) {
    setSongClicked(songFile[3])
  }
}

return (
  <div className="song-main-container">
    <div className="song-container">
      <img src={Rap} onClick={getSong} />
      <img src={Rock} onClick={getSong}/>
    </div>
    <div className="song-container">
      <img src={Trending} onClick={getSong} />
      <img src={Jazz} onClick={getSong}/>
    </div>
  </div>
)

方法3：使用自定义数据属性 #

给每个img添加data-index属性，在点击事件中读取该属性值作为索引：

function getSong(e) {
  let songFile = songs.map(song => song.songFile)
  const songIndex = parseInt(e.target.dataset.index)
  setSongClicked(songFile[songIndex])
}

return (
  <div className="song-main-container">
    <div className="song-container">
      <img src={Rap} data-index="0" onClick={getSong} />
      <img src={Rock} data-index="1" onClick={getSong}/>
    </div>
    <div className="song-container">
      <img src={Trending} data-index="2" onClick={getSong} />
      <img src={Jazz} data-index="3" onClick={getSong}/>
    </div>
  </div>
)

内容的提问来源于stack exchange，提问作者Gavin-walsh