如何向列表元素添加文本？

Question

我是一名新程序员，我最近开始学习 music-player 教程，但遇到了一些问题。

项目概况：

如前所述，这是一个用 create-react-app 制作的 music-player 项目。 objective是点击你选择的歌曲的图片，为你播放歌曲。

问题：

截至目前，可点击的图片列在[=54=的左侧 ] page，反过来，留下一大块页面是空的。这个space还是一个列表组件，Idea是填入对应歌曲的歌名。但是我不知道该怎么做。 我怎样才能将他们各自的标题添加到列表中？

代码

Turkish.js (music-player 文件):

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 })}
                onError={() => setStatus({ ...status, error: true })}
            />
        </ol>
    );
};

Turkish.css


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

下面我附上了 设计图片。

Answer 1

您需要根据需要在每个 object 数据列表中添加更多属性；

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() 读取它们并将它们作为 props 传递给 MediaComponent；

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

在 MediaComponent 内部用“li”替换元素“ol”并将标题渲染为道具；

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 })}
        onError={() => setStatus({ ...status, error: true })}
      /> */}
    </li>
  );

您可以使用 CSS Flexbox 布局来设置样式；

.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;
}

如何向列表元素添加文本？

How can I add text to a list element?

html

javascript

css

performance

reactjs

代码