在React 中渲染列表的核心方法是使用map() 遍歷數(shù)組並返回JSX 元素，同時(shí)必須為每個(gè)元素添加唯一key。 1. 使用map() 將數(shù)組轉(zhuǎn)換為JSX 列表；2. 每個(gè)列表項(xiàng)必須有唯一的key 屬性，優(yōu)先使用數(shù)據(jù)中的唯一ID，而非索引；3. 處理空列表狀態(tài)，提升用戶體驗(yàn)；4. 嵌套列表可通過(guò)嵌套map 實(shí)現(xiàn)，外層和內(nèi)層循環(huán)的key 都需設(shè)置。這些做法確保組件高效、可維護(hù)。

在React 中渲染列表其實(shí)不難，但要寫(xiě)得清晰又高效，還是有一些細(xì)節(jié)需要注意。核心就是：用map()遍歷數(shù)組，返回JSX 元素，並記得加上key屬性。

用map渲染列表是最常見(jiàn)方式

React 中最常見(jiàn)的做法是使用數(shù)組的map()方法，把數(shù)據(jù)轉(zhuǎn)換成一組JSX 元素。比如你想渲染一個(gè)名字列表：

 const names = ['Alice', 'Bob', 'Charlie'];

function NameList() {
  return (
    <ul>
      {names.map(name => (
        <li>{name}</li>
      ))}
    </ul>
  );
}

這樣就能顯示三個(gè)<li> 。不過(guò)要注意，每個(gè)元素必須有一個(gè)唯一的key ，否則React 會(huì)警告你。

每個(gè)列表項(xiàng)都要有唯一的key屬性

這是很多人剛開(kāi)始容易忽略的地方。如果你運(yùn)行上面那段代碼，控制臺(tái)可能會(huì)報(bào)錯(cuò)：“Each child in a list should have a unique 'key' prop.”
這是因?yàn)镽eact 用key來(lái)識(shí)別哪些項(xiàng)改變了、新增了或被移除了。所以你應(yīng)該給每個(gè)列表項(xiàng)加一個(gè)key ：

 {names.map((name, index) => (
  <li key={index}>{name}</li>
))}

如果數(shù)據(jù)本身有唯一ID（比如從後端獲取的用戶列表），那就優(yōu)先用那個(gè)ID 當(dāng)key，而不是用索引。例如：

 {users.map(user => (
  <li key={user.id}>{user.name}</li>
))}

用ID 的好處是，即使數(shù)組順序變了，React 也能正確地更新DOM。

列表為空時(shí)也要考慮展示

有時(shí)候你的列表可能是空的，比如還沒(méi)加載完成或者搜索無(wú)結(jié)果。這時(shí)候可以加一個(gè)判斷，顯示“暫無(wú)數(shù)據(jù)”之類的提示：

 function NameList({ names }) {
  if (!names.length) {
    return <p>沒(méi)有找到任何名字</p>;
  }

  return (
    <ul>
      {names.map((name, index) => (
        <li key={index}>{name}</li>
      ))}
    </ul>
  );
}

這種處理方式可以讓用戶體驗(yàn)更友好，也避免頁(yè)面出現(xiàn)空白。

嵌套列表也可以輕鬆實(shí)現(xiàn)

有時(shí)候你會(huì)遇到嵌套的數(shù)據(jù)結(jié)構(gòu)，比如分類下的子項(xiàng)。你可以通過(guò)嵌套的map來(lái)處理這種情況：

 const categories = [
  { id: 1, name: '水果', items: ['蘋(píng)果', '香蕉'] },
  { id: 2, name: '蔬菜', items: ['西紅柿', '黃瓜'] }
];

function CategoryList() {
  return (
    <div>
      {categories.map(category => (
        <div key={category.id}>
          <h3>{category.name}</h3>
          <ul>
            {category.items.map((item, idx) => (
              <li key={idx}>{item}</li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}

這里外層循環(huán)是分類，內(nèi)層循環(huán)是每類裡的具體項(xiàng)。注意兩個(gè)key都不能省略，而且最好盡量用唯一ID。

基本上就這些。雖然看起來(lái)簡(jiǎn)單，但在實(shí)際項(xiàng)目中，處理好列表的key、空狀態(tài)和嵌套結(jié)構(gòu)，能讓你的組件更健壯、可維護(hù)性更強(qiáng)。

以上是如何在React中渲染列表的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！