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

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

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

             {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 函数将当前歌曲发送到音频源，更新歌曲的图像，但我想突出显示正在播放的当前歌曲，我希望能够添加一个有效的动态 className播放列表中正在播放的歌曲，简而言之就是区分当前播放的歌曲和未播放的歌曲。

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

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