React中根据数组元素数量重复渲染相同组件的问题

你的代码存在几个关键问题导致无法渲染内容，同时需要调整逻辑实现分组包裹的需求，以下是修正方案：

原代码问题分析 #

1. Rain组件无返回值：React函数组件必须返回可渲染的JSX元素/数组，你的Rain只是执行forEach，没有返回任何内容
2. forEach无法收集组件：forEach仅遍历执行回调，不会返回结果，无法用来生成组件列表
3. getRain未返回生成的组件：函数内部生成了<Drop />数组，但没有return出去，等于无效执行

修正后的完整代码 #

import { ReactComponent as Drop } from './images/raindrop.svg';

function App() {
  // 静态数组
  const array = [1,6,8,7,3,5,5,2,3,0];

  // 封装分组渲染逻辑
  const renderRainGroups = () => {
    return array.map((count, groupIndex) => {
      // 每个数字对应一个分组div
      return (
        <div key={`rain-group-${groupIndex}`} className="rain-group">
          {Array.from({ length: count }, (_, dropIndex) => (
            <Drop key={`drop-${groupIndex}-${dropIndex}`} />
          ))}
        </div>
      );
    });
  };

  return (
    <div className="App">
      {renderRainGroups()}
    </div>
  );
}

export default App;

关键改动说明 #

• 使用array.map遍历数组：map会返回新的组件数组，供React渲染
• 每个数字对应一个<div>分组：把每个数字生成的<Drop />组件包裹在独立div中，实现分组分隔
• 唯一key设置：为分组div和每个Drop组件设置唯一key（结合组索引和组件索引），避免React列表渲染警告
• 直接返回组件数组：确保每个生成组件的逻辑都有return，让React能拿到可渲染的内容

如果想保留更细的函数拆分，也可以这样写：

// 单独生成单组的Drop组件
const getRainGroup = (count, groupIndex) => {
  const drops = Array.from({ length: count }, (_, idx) => <Drop key={`drop-${groupIndex}-${idx}`} />);
  return <div key={`group-${groupIndex}`} className="rain-group">{drops}</div>;
};

// 在渲染中调用
return (
  <div className="App">
    {array.map((count, idx) => getRainGroup(count, idx))}
  </div>
);

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