如何將文本添加到串列元素？

我是一名新程式員，最近開始學習音樂播放器教程，但遇到了一些問題。

專案概況：

如前所述，它是一個音樂播放器專案，使用create-react-app. 目標是單擊您選擇的歌曲的影像，然后為您播放歌曲。

問題：

截至目前，可點擊的影像列在音樂播放器頁面的左側 ，而頁面的很大一部分是空白的。這個空間仍然是一個串列組件，idea是給它填上它對應的歌曲的標題。但是我不知道該怎么做。我怎樣才能將他們各自的標題添加到串列中？

編碼

土耳其語.js （音樂播放器檔案）：

import React, { Component,useRef, setStatus, status } from 'react';
import './Turkish.css';

import turk1 from "./music/turk1.mp3";
import turk2 from "./music/turk2.mp3"
import turk3 from "./music/turk3.mp3"
import turk4 from "./music/turk4.mp3"

export default function Turkish() {
    const data = [
        { imgSrc: 'turk1.png', audioSrc: turk1},
        { imgSrc: 'turk2.png', audioSrc: turk3 },
        { imgSrc: 'turk3.png', audioSrc: turk4 },
        { imgSrc: 'turk4.png', audioSrc: turk2 },
    ];

    return (
        <div className='Turkish'>
            <ol>
            
                {data.map(({ imgSrc, audioSrc }) => (
                    <MediaComponent imgSrc={imgSrc} audioSrc={audioSrc} />
                ))}
            </ol>
        </div>
    );
  
}

const MediaComponent = ({ imgSrc, audioSrc }) => {
    const audioRef = useRef(null);
    const toggleAudio = () =>
      audioRef.current === null
        ? console.log("Audio component is not loaded yet.")
        : audioRef.current.paused
        ? audioRef.current.play()
        : audioRef.current.pause();

        
    return (
        <ol>
            <img src={imgSrc} onClick={toggleAudio} />
            <audio
                ref={audioRef}
                src={audioSrc}
                onLoad={() => setStatus({ ...status, isLoaded: true })}
                onPlay={() => setStatus({ ...status, isPlaying: true })}
                onPause={() => setStatus({ ...status, isPlaying: false })}
                one rror={() => setStatus({ ...status, error: true })}
            />
        </ol>
    );
};

土耳其語.css

.Turkish ol {
    cursor: grab;
    border: solid;
    border-color: #303030;
    border-width: 0.01px ;
    border-left: transparent;
    border-right: transparent;
    border-bottom: transparent;
   
}

下面我附上了設計的圖片。

uj5u.com熱心網友回復：

您需要根據需要將更多屬性添加到資料串列的每個物件中；

const data = [
    { imgSrc: "turk1.png", title: "Track One" },
    { imgSrc: "turk2.png", title: "Track Two" },
    { imgSrc: "turk3.png", title: "Track Three" },
    { imgSrc: "turk4.png", title: "Track Four" }
  ];

然后你可以通過 .map() 讀取它們并將它們作為道具傳遞給 MediaComponent；

<div className="Turkish">
  <ol>
    {data.map(({ imgSrc, audioSrc, title }) => (
      <MediaComponent imgSrc={imgSrc} audioSrc={audioSrc} title={title} />
    ))}
  </ol>
</div>

在 MediaComponent 內部，將元素“ol”替換為“li”，并將標題呈現為道具；

return (
    <li>
      <img src={imgSrc} onClick={toggleAudio} />
      <div>{titile}</div>
      {/* <audio
        ref={audioRef}
        src={audioSrc}
        onLoad={() => setStatus({ ...status, isLoaded: true })}
        onPlay={() => setStatus({ ...status, isPlaying: true })}
        onPause={() => setStatus({ ...status, isPlaying: false })}
        one rror={() => setStatus({ ...status, error: true })}
      /> */}
    </li>
  );

您可以使用 CSS Flexbox Layout 進行樣式設定；

.Turkish ol li {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  cursor: grab;
  border: solid;
  border-color: #303030;
  border-width: 0.01px;
  border-left: transparent;
  border-right: transparent;
  border-bottom: transparent;
}

標籤：javascript html css 反应 表现

上一篇：javascript中的var提升問題及其輸出

下一篇：如何在javascript中使用承諾？Javascript中的基本Promise