react遍历生成的5个div块每个div显示不同的颜色每一个div加上overflow-y

你可以使用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属性