react如何查看列表

在React中查看列表的方法

使用map方法渲染数组是最常见的方式。假设有一个数组items，可以通过以下代码将其渲染为列表：

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

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

添加条件渲染

当列表可能为空时，可以添加条件判断：

function ListComponent() {
  return (
    <div>
      {items.length > 0 ? (
        <ul>
          {items.map((item, index) => (
            <li key={index}>{item}</li>
          ))}
        </ul>
      ) : (
        <p>No items found</p>
      )}
    </div>
  );
}

使用组件分离列表项

对于复杂的列表项，可以将其提取为单独的组件：

function ListItem({ item }) {
  return <li>{item}</li>;
}

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

处理动态数据

当数据来自API或状态管理时：

import { useState, useEffect } from 'react';

function ListComponent() {
  const [items, setItems] = useState([]);

  useEffect(() => {
    fetch('/api/items')
      .then(response => response.json())
      .then(data => setItems(data));
  }, []);

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

使用索引作为key的注意事项

虽然可以使用数组索引作为key，但对于会变化的列表，最好使用唯一ID：

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

样式化列表

可以添加CSS类或内联样式：

<ul className="item-list">
  {items.map(item => (
    <li key={item.id} style={{ padding: '8px' }}>
      {item.name}
    </li>
  ))}
</ul>