如何在JSX中渲染数组所有元素？附尝试代码求助

开发者阿泽

2026-8-11

正确实现数组元素动态渲染的方法

先修正你代码里的核心问题：

语法错误：cons要改成const
React组件命名需首字母大写（否则会被识别为普通HTML标签）
普通for循环不会自动返回JSX元素集合，需要通过数组存储或直接用数组方法生成

方法一：用数组`map`方法（React推荐写法）

这是渲染动态列表最简洁的方式，map会遍历数组每个元素并返回对应的JSX元素，记得给每个列表项加唯一key属性（用于React优化渲染）。

// 定义渲染数组的组件
const ArrayList = ({ array }) => {
  return array.map((item, index) => (
    <li key={index}>
      <p>{item}</p>
    </li>
  ));
};

// 页面组件调用
const Page = () => {
  // 示例数组（实际可替换为你的目标数组）
  const targetArray = ["第一项", "第二项", "第三项"];
  
  return ( 
    <div>
      <ul>
        <ArrayList array={targetArray} />
      </ul>
    </div>
  );
};

方法二：用for循环构建元素数组

如果你习惯用for循环，可手动创建数组存储生成的JSX元素，最后返回该数组：

const ArrayList = ({ array }) => {
  const listItems = [];
  for (let i = 0; i < array.length; i++) {
    listItems.push(
      <li key={i}>
        <p>{array[i]}</p>
      </li>
    );
  }
  return listItems;
};

// 页面组件调用逻辑和方法一一致
const Page = () => {
  const targetArray = ["第一项", "第二项", "第三项"];
  return ( 
    <div>
      <ul>
        <ArrayList array={targetArray} />
      </ul>
    </div>
  );
};