当前位置：首页 > React

react如何循环

2026-03-30 17:14:27React

循环渲染列表数据

在React中，循环渲染数据通常使用map方法。map可以将数组中的每个元素转换为React元素，并返回一个新的数组。这种方法是最常见的循环渲染方式。

const items = ['Apple', 'Banana', 'Orange'];

function List() {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

使用key属性

在循环渲染时，必须为每个子元素提供一个唯一的key属性。key帮助React识别哪些元素发生了变化，提高渲染性能。通常使用数据的唯一ID作为key，如果没有ID，可以使用数组索引。

react如何循环

const items = [{ id: 1, name: 'Apple' }, { id: 2, name: 'Banana' }];

function List() {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

条件渲染与循环结合

可以在循环中结合条件判断，动态渲染不同的内容。使用&&或三元运算符进行条件判断。

react如何循环

const items = [
  { id: 1, name: 'Apple', inStock: true },
  { id: 2, name: 'Banana', inStock: false }
];

function List() {
  return (
    <ul>
      {items.map(item => (
        item.inStock ? <li key={item.id}>{item.name} (In Stock)</li> : null
      ))}
    </ul>
  );
}

使用forEach或其他循环方法

虽然map是最常用的方法，但也可以使用forEach或其他循环方法。需要注意的是，forEach不会返回新数组，需要手动收集结果。

const items = ['Apple', 'Banana', 'Orange'];

function List() {
  const listItems = [];
  items.forEach((item, index) => {
    listItems.push(<li key={index}>{item}</li>);
  });
  return <ul>{listItems}</ul>;
}

渲染对象而非数组

如果需要循环渲染对象的属性，可以先将对象的键或值转换为数组，再使用map方法。

const fruitColors = {
  apple: 'red',
  banana: 'yellow',
  orange: 'orange'
};

function ColorList() {
  return (
    <ul>
      {Object.keys(fruitColors).map(key => (
        <li key={key}>{key}: {fruitColors[key]}</li>
      ))}
    </ul>
  );
}

标签: react