如何在 React 卡片轮播中正确渲染嵌套列表项（）

） " />

本文详解如何在 React 动态卡片组件中，将数组形式的工作经历数据映射为独立的 元素，避免换行符 \n 渲染失效问题，并提供两种健壮、可维护的实现方案。

本文详解如何在 react 动态卡片组件中，将数组形式的工作经历数据映射为独立的 `

的语义要求每个
• 必须是独立子元素。

  ✅ 正确解法是对 list 数组进行二次 .map()，在

  

  遨虾

  1688推出的跨境电商AI智能体

  下载
  内部逐项生成
  • 。以下是优化后的核心逻辑（已整合进完整组件）：

    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: ["审核质量体系", "主导内部审计", "协调跨部门整改"] // ✅ 推荐：纯字符串数组
        },
        {
          id: "2",
          title: "Second Slide",
          list: [] // 支持空数组，避免渲染异常
        },
        {
          id: "3",
          title: "Third Slide",
          list: ["单条职责也可正常渲染"]
        }
      ];
    
      const handleClick = (direction: "left" | "right") => {
        if (direction === "left") {
          setCurrentSlide(prev => (prev > 0 ? prev - 1 : data.length - 1));
        } else {
          setCurrentSlide(prev => (prev < data.length - 1 ? prev + 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" key={d.id}> {/* ✅ 添加 key 提升性能与稳定性 */}
                <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">
                      {/* ✅ 方案一：直接映射字符串数组（推荐） */}
                      {d.list.map((item, index) => (
                        <li key={index}>{item}</li> {/* 使用 index 作为 key（仅当 item 无唯一标识时） */}
                      ))}
                    </ul>
                  </div>
                </div>
              </div>
            ))}
          </div>
          <ArrowBackIosNew className="arrow left" onClick={() => handleClick("left")} />
          <ArrowBackIosNew className="arrow right" onClick={() => handleClick("right")} />
        </div>
      );
    }

    ? 关键要点说明：

    • key 必须存在：
    • 是动态列表项，React 要求每个子元素有稳定 key。若 list 中字符串本身唯一（如不重复的职责描述），可用 key={item}；若存在重复内容，务必使用 key={index}（如上例），避免潜在渲染错误。
    • 避免 \n 字符串方案：虽然可通过 list.split("\n") 实现，但需额外处理空格、首尾空白及转义风险，且破坏数据结构语义——工作经历本质是有序项目集合，应天然用数组建模。
    • 空数组安全处理：d.list.map(...) 对空数组自动返回空数组，无需 d.list?.length > 0 && ... 判断，简洁可靠。
    • 样式补充建议：在 resources.scss 中确保 .bullets li 具备适当间距（如 margin-bottom: 0.5rem），并为无 list 字段的对象提供默认空数组（list: []），增强鲁棒性。

    通过此方案，每张卡片的右侧列表将精准渲染为语义清晰、样式可控的独立

  • 项，既符合 HTML 标准，又兼顾 React 最佳实践，让职业经历展示专业且可维护。