React中如何根据数组长度动态渲染对应数量的div？

嘿，刚好熟这个场景！你说的用map遍历数组生成元素的方法，完全适配你这个Free Code Camp的Wikipedia Viewer项目需求，我给你一步步理清楚：

1. 先配置好存储结果的State #

首先在函数组件里，用useState初始化一个空数组来存API返回的结果：

import { useState } from 'react';

function WikipediaViewer() {
  // 初始化空数组，后续存放API返回的搜索结果
  const [searchResults, setSearchResults] = useState([]);

  // 编写调用API的函数，获取结果后更新state
  const handleSearch = async (query) => {
    // 调用Wikipedia公开API的逻辑（已处理跨域）
    const response = await fetch(`https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=${query}&format=json&origin=*`);
    const data = await response.json();
    // 将API返回的搜索结果更新到state中
    setSearchResults(data.query.search);
  };

  // 组件渲染部分
  return (
    <div className="viewer-wrapper">
      {/* 搜索输入区域，绑定搜索事件 */}
      <input 
        type="text" 
        onChange={(e) => handleSearch(e.target.value)} 
        placeholder="搜索Wikipedia内容..."
      />
      
      {/* 核心：用map遍历state数组生成目标div */}
      {searchResults.length > 0 ? (
        searchResults.map((result, index) => (
          {/* 给每个div添加key（这里用索引，若结果有唯一ID更推荐用ID）和指定className */}
          <div key={index} className="search-result-card">
            {/* 渲染搜索结果的标题和摘要 */}
            <h3>{result.title}</h3>
            <p dangerouslySetInnerHTML={{ __html: result.snippet }}></p>
          </div>
        ))
      ) : (
        {/* 数组为空时的提示文案 */}
        <p>请输入关键词开始搜索</p>
      )}
    </div>
  );
}

export default WikipediaViewer;

2. 关键细节解释 #

• map的实际用法：数组的map方法会遍历每个元素，返回一个新的元素数组。在React中，我们用它把数据数组直接转换成React元素数组，实现“数据驱动视图”。
• key的重要性：React需要key来识别每个元素的唯一性，以此高效更新DOM。你提到用数组索引当key，在这个搜索场景（结果不会被重新排序、增删）下是可行的，但如果数据里有唯一标识（比如Wikipedia返回结果的pageid），更推荐用这个唯一值当key，更符合React最佳实践。
• className的设置：直接在div标签上添加className="你的自定义类名"即可，和普通HTML的class用法一致。
• 自动重渲染机制：当你调用setSearchResults更新state后，React会自动重新执行组件渲染逻辑，把新的数组元素转换成对应的div展示出来。

3. 适配你提供的测试数组 #

如果用你给出的const arrayWithValues = ['1','2','3','4','5']做测试，渲染部分可以简化成：

{arrayWithValues.map((item, i) => (
  <div key={i} className="your-target-class">
    {item}
  </div>
))}

这样就能生成5个带指定className的div，每个div内容对应数组里的元素啦～

内容的提问来源于stack exchange，提问作者mblancodev