我正在制作可以滑动的卡片，并且已经映射了我需要的所有信息，除了我的工作经验的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在不同的行上
我认为使用数组和字符串与\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> ) })}另外，我认为在数组中映射数组是非常常见的用例。