我正在製作可以滑動的卡片，並且已經映射了我需要的所有信息，除了我的工作經驗的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 Experiences
{data.map((d) => ( {d.title} {d.subtitle} - {d.list}
))} handleClick("left")}/> handleClick("right")}/> 網站上，我希望hello和goodbye在不同的行上
我認為使用陣列和字串與\n一起使用會更加複雜。在我的情況下，我只想使用字串。
例如，
list : Hello \n Goodbye;#而且，在你的程式碼中。
{data.map(el => { const { list } = el; return ( //...Your Code ) })}{list.split("\n").map((str) => { return (- {str}
) })}
這可能會導致鍵警告。
我建議你只使用帶有\n的字串或不帶有\n的字串陣列。
如果你想使用類似
list : ["Hello", "Goodbye"]的陣列。{data.map(el => { const { list } = el; return ( //...Your Code ) })}{list.map((str) => { return (- {str}
) })}
另外，我認為在陣列中映射數組是非常常見的用例。