时间戳

首页 > 解决方案 > 如何突出显示正在播放的当前歌曲

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

问题描述

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


             {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"}

标签： reactjsaudio-playerplaylist

解决方案

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

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

推荐阅读