React 循环创建 5 个不同颜色、带滚动条的 div 块

你可以使用 React 中的循环来生成 5 个 div 块，并为每个 div 块添加不同的颜色和 overflow-y 属性。

首先，你需要创建一个 React 组件来表示这 5 个 div 块：

import React from 'react';

const DivBlocks = () => {
  // 定义一个数组来存储颜色值
  const colors = ['red', 'blue', 'green', 'yellow', 'orange'];

  return (
    <div>
      {/* 使用 map 方法循环生成 5 个 div 块 */}
      {colors.map((color, index) => (
        <div key={index} style={{ backgroundColor: color, overflowY: 'scroll' }}>
          {/* 在每个 div 块中显示颜色名称 */}
          {color}
        </div>
      ))}
    </div>
  );
};

export default DivBlocks;

在上面的代码中，我们使用了map方法来循环遍历colors数组，并为每个 div 块设置不同的背景颜色和 overflow-y 属性。key属性用于 React 的列表渲染，确保每个 div 块有唯一的标识。

你可以使用这个DivBlocks组件在其他组件中使用，例如在 App.js 中：

import React from 'react';
import DivBlocks from './DivBlocks';

const App = () => {
  return (
    <div>
      <DivBlocks />
    </div>
  );
};

export default App;

这样，当你在浏览器中渲染 App 组件时，将会显示 5 个不同颜色的 div 块，并且每个 div 块都有 overflow-y 属性。