将数据中的元素映射为独立的网站<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>
  )
})}

另外，我认为在数组中映射数组是非常常见的用例。