react 如何遍历

遍历数组

在React中遍历数组通常使用map方法，它返回一个新的数组，每个元素都经过函数处理。例如：

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

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

遍历对象

遍历对象可以使用Object.keys()、Object.values()或Object.entries()结合map方法。例如：

const person = { name: 'John', age: 30, job: 'Developer' };

function PersonDetails() {
  return (
    <div>
      {Object.entries(person).map(([key, value]) => (
        <p key={key}>{`${key}: ${value}`}</p>
      ))}
    </div>
  );
}

条件渲染

在遍历时可以结合条件判断，使用filter或直接在map中添加条件。例如：

const numbers = [1, 2, 3, 4, 5];

function EvenNumbers() {
  return (
    <div>
      {numbers.filter(num => num % 2 === 0).map(num => (
        <span key={num}>{num}</span>
      ))}
    </div>
  );
}

使用Fragment

如果不需要包裹元素，可以使用Fragment来避免额外的DOM节点。例如：

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

function FragmentList() {
  return (
    <>
      {items.map((item, index) => (
        <React.Fragment key={index}>
          <span>{item}</span>
          <br />
        </React.Fragment>
      ))}
    </>
  );
}

遍历嵌套数据结构

对于嵌套数据，可以使用递归或嵌套的map调用。例如：

const nestedData = [
  { id: 1, name: 'Parent', children: [
    { id: 2, name: 'Child' }
  ]}
];

function NestedList({ data }) {
  return (
    <ul>
      {data.map(item => (
        <li key={item.id}>
          {item.name}
          {item.children && <NestedList data={item.children} />}
        </li>
      ))}
    </ul>
  );
}