Ordnen Sie Elemente in den Daten unabhängigen Website-<li>-Elementen zu

Question

Ich erstelle Karten, die durchgeblättert werden können und auf denen alle Informationen abgebildet sind, die ich benötige, mit Ausnahme meiner Berufserfahrung. Ich würde ein Bild anhängen, aber das Problem, das ich habe, besteht darin, jeden Schieberegler Daten in einem separaten Li-Element zuzuordnen. Ich denke, ein Array innerhalb eines Arrays wäre vielleicht gut, aber ich bin neu in diesem Bereich und nicht sicher, wie ich alles in eine neue Zeile bringen kann.

Hier ist der Code, den ich habe:

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>
    )

}

Auf der Website möchte ich, dass „Hallo“ und „Auf Wiedersehen“ in unterschiedlichen Zeilen stehen

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>
  )
})}

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