react的List如何添加
在 React 中添加 List 的方法
使用 map 方法渲染数组
在 React 中，通常使用 map 方法将数组数据渲染为列表项。
import React from "react";
function MyList() {
const items = ["Item 1", "Item 2", "Item 3"];
return (
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
);
}
export default MyList;动态生成列表
如果数据来自 API 或动态计算，可以结合 useState 和 useEffect 进行管理。
import React, { useState, useEffect } from "react";
function DynamicList() {
const [items, setItems] = useState([]);
useEffect(() => {
// 模拟 API 获取数据
const fetchData = async () => {
const response = await fetch("https://api.example.com/items");
const data = await response.json();
setItems(data);
};
fetchData();
}, []);
return (
<ul>
{items.map((item) => (
<li key={item.id}>{item.name}</li>
))}
</ul>
);
}
export default DynamicList;使用 key 提高性能
React 要求列表项必须有一个唯一的 key 属性，通常使用 id 或 index（不推荐在可变的列表中使用 index）。
<ul>
{items.map((item) => (
<li key={item.id}>{item.text}</li>
))}
</ul>使用组件封装列表项
如果列表项较复杂，可以拆分成单独的组件。
function ListItem({ item }) {
return <li>{item.name}</li>;
}
function ItemList() {
const items = [
{ id: 1, name: "Apple" },
{ id: 2, name: "Banana" },
];
return (
<ul>
{items.map((item) => (
<ListItem key={item.id} item={item} />
))}
</ul>
);
}使用 React.Fragment 避免额外 DOM 节点
如果不想在外层包裹 <div> 或 <ul>，可以使用 React.Fragment（简写为 <>）。
function FragmentList() {
return (
<>
<li>Item A</li>
<li>Item B</li>
</>
);
}这些方法涵盖了 React 中常见的列表渲染方式，适用于不同场景。
