当前位置：首页 > React

react中如何遍历

2026-03-31 00:12:35React

遍历数组渲染列表

在React中，可以通过map方法遍历数组并渲染列表。map会返回一个新数组，每个元素是回调函数的返回值。确保为每个列表项添加唯一的key属性以优化渲染性能。

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

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

遍历对象渲染属性

遍历对象时，可以使用Object.keys、Object.values或Object.entries获取对象的键、值或键值对，再通过map渲染。

const user = { name: 'John', age: 30, city: 'New York' };

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

条件渲染与遍历结合

在遍历过程中可以结合条件判断，例如使用filter过滤数据或直接在map中添加条件逻辑。

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

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

使用Fragment简化遍历

当不需要包裹容器时，可以使用<React.Fragment>或简写<>来避免额外的DOM节点。

const tags = ['React', 'JavaScript', 'HTML'];

function TagsList() {
  return (
    <>
      {tags.map(tag => (
        <span key={tag}>{tag}</span>
      ))}
    </>
  );
}

遍历动态数据与状态管理

结合useState或useEffect处理动态数据，例如从API获取数据后遍历渲染。

react中如何遍历

import { useState, useEffect } from 'react';

function DynamicList() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => response.json())
      .then(data => setPosts(data));
  }, []);

  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}