我如何突出显示正在播放的当前歌曲

Question

这是显示我的播放列表的代码。


             {data?.map((data, index) => {
                 return(
                  <li 
                  onClick={(e) => {
                    e.preventDefault()
                    setActive(true)
                      store.addSong(data.assets[0].audio)
                      store.addImage(data.photo)
                      store.addName(data.name)
                      store.addSongIndex(index)
                  }}
                  className={!store.song ? "" : "active"}
                  key={data?.id}>
                  <div className="plItem">
                     <span className="trackNumber">{index + 1}</span> 
                     <span className="trackTitle">
                        <WordLimit limit={35}>
                         {data ? data.name : "word"}
                         </WordLimit> 
                      </span> 
                   </div>
                   </li>
                 )
             } 
              )}

因此，onclick 函数将当前歌曲发送到音频源，更新歌曲的图像，但我想突出显示正在播放的当前歌曲，我希望能够添加一个动态类名作用于播放列表中正在播放的歌曲，简而言之就是区分当前播放的歌曲和未播放的歌曲。

我尝试动态添加一个名为 active 的类名，但它只得到一个 <li></li> 它得到了所有，这不是我想要的。这是我尝试这样做的方法..

className={!store.song ? "" : "active"}

Answer 1

您可以做的是，在您的 className 逻辑中，将当前歌曲与商店中的歌曲进行比较。如果它们相等，那就是突出显示的 class:

className={store.song === data.song ? "highlight" : undefined}

这是在上下文中：

{data?.map((data, index) => {
  return(
    <li 
      onClick={(e) => {
        e.preventDefault()
        setActive(true)
        store.addSong(data.assets[0].audio)
        store.addImage(data.photo)
        store.addName(data.name)
        store.addSongIndex(index)
      }}
      className={store.song === data.song ? "highlight" : undefined}
      key={data?.id}
    >
    <div className="plItem">
      <span className="trackNumber">{index + 1}</span> 
      <span className="trackTitle">
        <WordLimit limit={35}>
          {data ? data.name : "word"}
        </WordLimit> 
      </span> 
    </div>
  </li>
)})}

我如何突出显示正在播放的当前歌曲

How can i highlight the current song that is being played

playlist

audio-player

reactjs