reactjs v18 横向分布了 10 个 block 只显示了 3 个 block如何在界面加载了所有 block 之后自动滑向那个初始的 block 处例如第 7 个

在 ReactJS v18 中，可以使用 useEffect 钩子函数来实现在加载完所有 block 后自动滑向初始的 block。

首先，你需要在组件中创建一个 ref 来引用要滑动到的 DOM 元素。然后，使用 useEffect 钩子函数来监听该 ref 对象的变化。当 ref 对象的值发生变化时，表示所有 block 已经加载完毕，此时可以执行滑动操作。

以下是一个示例代码：

import React, { useEffect, useRef } from 'react';

const App = () => {
  const blockRef = useRef(null); // 创建一个 ref 对象

  useEffect(() => {
    // 当 ref 对象的值发生变化时执行滑动操作
    if (blockRef.current) {
      blockRef.current.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    }
  }, [blockRef.current]);

  return (
    <div>
      {/* 横向分布的 10 个 block */}
      <div style={{ display: 'flex' }}>
        {Array.from({ length: 10 }, (_, index) => (
          <div key={index} style={{ width: '100px', height: '100px', border: '1px solid black' }}>
            {index + 1}
          </div>
        ))}
      </div>

      {/* 用于引用初始的 block */}
      <div ref={blockRef}></div>
    </div>
  );
};

export default App;

在上述代码中，我们创建了一个 blockRef 的 ref 对象，并将其绑定到最后一个 <div> 元素上。当所有 block 加载完毕后，blockRef 的值将被赋予最后一个 <div> 元素的 DOM 引用。

然后，在 useEffect 钩子函数中，我们监听 blockRef.current 的变化。当其值发生变化时，表示所有 block 已经加载完毕，此时我们可以调用 scrollIntoView 方法来将初始的 block 滑动到可视范围内。

在 scrollIntoView 方法中，我们使用了 behavior: 'smooth' 来实现平滑滚动效果，block: 'nearest' 则表示滚动到最近的可视位置。

注意：需要在 React 组件中使用以上代码，并确保你的 React 版本支持 React Hooks