將資料中的元素對應為獨立的網站<li>元素

Question

我正在製作可以滑動的卡片，並且已經映射了我需要的所有信息，除了我的工作經驗的ul。我會附上圖片，但我遇到的問題是將每個滑桿映射到單獨的li元素中的資料。我想一個陣列中的陣列可能是好的，但我是新手，不確定如何讓所有內容在新行上。

以下是我擁有的程式碼：

import "./resources.scss"
import {ArrowBackIosNew} from "@mui/icons-material";
import {useState} from "react";

export default function Resources() {
    const [currentSlide, setCurrentSlide] = useState(0);
    const data = [
        {
            id: "1",
            title: "Quality Manager",
            subtitle: "Biolife Plasma Services",
            list: ["Hello" + "\n", "Goodbye"]

        },
        {
            id: "2",
            title: "Second Slide"
        },
        {
            id: "3",
            title: "Third Slide"
        },
        {
            id: "4",
            title: "Fourth Slide"
        }
    ];

    const handleClick = (direction) => {
        direction === "left" ? setCurrentSlide(currentSlide > 0 ? currentSlide-1 : data.length-1) :
            setCurrentSlide(currentSlide<data.length-1 ? currentSlide+1 : 0)
    };

    return(
        <div className = "resources" id="resources">
            <h1>Experiences</h1>
            <div className="slider" style={{transform: `translateX(-${currentSlide * 100}vw)`}}>
                {data.map((d) => (
                <div className="container">
                    <div className="item">
                        <div className="left">
                            <div className="leftContainer">
                                {d.title}
                                <div className="subtext">
                                    {d.subtitle}
                                </div>
                            </div>
                        </div>
                        <div className="right">
                            <ul className="bullets">
                                <li>{d.list}</li>
                            </ul>
                        </div>
                    </div>
                </div>))}
            </div>
        <ArrowBackIosNew className="arrow left" onClick={()=>handleClick("left")}/>
        <ArrowBackIosNew className="arrow right" onClick={()=>handleClick("right")}/>

        </div>
    )

}

網站上，我希望hello和goodbye在不同的行上

Answer 1

我認為使用陣列和字串與\n一起使用會更加複雜。在我的情況下，我只想使用字串。

例如，

list : Hello \n Goodbye;

#而且，在你的程式碼中。

{data.map(el => {
  const { list } = el;
  return (
    <div>
    //...Your Code
       <div className="right">
         <ul className="bullets">
             {list.split("\n").map((str) => {
               return (
                 <li key={str}>
                  {str}
                 </li>
               )
             })}
         </ul>
       </div>
    </div>
  )
})}

這可能會導致鍵警告。

我建議你只使用帶有\n的字串或不帶有\n的字串陣列。

如果你想使用類似list : ["Hello", "Goodbye"]的陣列。

{data.map(el => {
  const { list } = el;
  return (
    <div>
    //...Your Code
       <div className="right">
         <ul className="bullets">
             {list.map((str) => {
               return (
                 <li key={str}>
                  {str}
                 </li>
               )
             })}
         </ul>
       </div>
    </div>
  )
})}

另外，我認為在陣列中映射數組是非常常見的用例。