React 遍历生成 5 个不同颜色可滚动 div 块，仅当前 div 可滑动

可以使用 map 函数来遍历生成 5 个 div 块，并给每个 div 设置不同的颜色和 overflow-y 属性。然后，通过添加事件监听器来控制只有当前滑动的 div 具有滚动效果，其他 div 则禁止滚动。

首先，创建一个 React 组件，将 5 个 div 块渲染出来：

import React, { useState } from 'react';

const DivBlocks = () => {
  const [activeIndex, setActiveIndex] = useState(-1);

  const colors = ['red', 'blue', 'green', 'yellow', 'orange'];

  const handleScroll = (index) => {
    setActiveIndex(index);
  };

  return (
    <div>
      {colors.map((color, index) => (
        <div
          key={index}
          style={{
            background: color,
            overflowY: activeIndex === index ? 'scroll' : 'hidden',
          }}
          onScroll={() => handleScroll(index)}
        >
          {index + 1}
        </div>
      ))}
    </div>
  );
};

export default DivBlocks;

上述代码中，我们使用 useState 钩子来保存当前活动的 div 的索引 activeIndex，默认为 -1 表示无活动状态。

在 colors.map 中，我们使用 index 作为 key 来遍历生成 5 个 div 块。根据 activeIndex 是否等于当前索引，来设置不同的 overflow-y 属性。同时，给每个 div 添加 onScroll 事件监听器，当滑动时，调用 handleScroll 函数。

handleScroll 函数用于更新 activeIndex，当滑动某个 div 时，将该 div 的索引设置为 activeIndex，其他 div 则不会有滑动效果。

最后，将 DivBlocks 组件渲染到你的应用中：

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

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

export default App;

这样，你就可以在浏览器中看到 5 个不同颜色的 div 块，并且只有当前滑动的 div 具有滚动效果，其他 div 则不会滚动。