ReactJS中操作溢出Flexbox容器滚动的正确实现方法

首先纠正认知偏差：React 并不禁止所有DOM操作，只有当手动修改的DOM内容/结构由React虚拟DOM接管渲染、会和diff更新产生冲突时才属于反模式。对于滚动控制、输入框聚焦、媒体播放控制这类浏览器原生行为、React没有提供对应声明式API的场景，通过ref拿到DOM节点后操作是官方推荐的标准实现，不会触发额外的组件重渲染。

对你列出的三种方案的评估 #

• 方案1：在useEffect中实现：不适用。useEffect的作用是在组件挂载/依赖项更新时同步副作用逻辑，而你的滚动触发时机是用户点击按钮，硬要写在useEffect里需要额外维护状态标记滚动方向，反而会触发不必要的重渲染，逻辑冗余。
• 方案2：创建自定义Hook实现：仅在多组件复用时推荐。如果这套滚动逻辑需要在多个同类滑块组件里使用，可以抽成自定义Hook复用，但Hook内部的核心逻辑依然是ref操作DOM，不会产生额外重渲染；如果仅当前单组件使用，额外抽Hook只会增加代码复杂度，没有必要。
• 方案3：在事件处理函数中操作DOM：这是最优解。注意不要用document.querySelector这类原生方法全局查找DOM，用React提供的useRef绑定目标容器节点即可，完全符合React开发规范，无性能损耗。

完整可运行实现代码 #

原有样式代码无需调整：

.container {
  width: 200px;
  height: 100px;
  overflow: auto;
  overflow-y: hidden;
}

.container p {
  width: 300px;
  height: 100px;
  background-color: yellow;
}

组件逻辑代码如下，顺便修正了你原有JSX里事件绑定传字符串的错误：

import { useRef } from 'react';

export function Slider() {
  // 定义ref绑定滚动容器节点
  const containerRef = useRef<HTMLDivElement>(null);
  // 单次滚动步长，可根据业务需求调整
  const SCROLL_STEP = 100;

  const handleScrollLeft = () => {
    if (!containerRef.current) return;
    // 向左滚动对应减小scrollLeft属性值
    containerRef.current.scrollLeft -= SCROLL_STEP;
  }
    
  const handleScrollRight = () => {
    if (!containerRef.current) return;
    // 向右滚动对应增大scrollLeft属性值
    containerRef.current.scrollLeft += SCROLL_STEP;
  }
    
  return (
    <>
      <div className="container" ref={containerRef}>
        <p>Sample Text1, Sample Text2, Sample Text3</p>
      </div>
      <button onClick={handleScrollLeft}>Left</button>
      <button onClick={handleScrollRight}>Right</button>
    </>
  );
}

原理说明 #

1. useRef创建的引用在组件整个生命周期内保持稳定，修改ref.current的值不会触发组件重渲染，完全满足你不希望强制重渲染的需求。
2. 你操作的scrollLeft是DOM元素的内置滚动状态，这个值没有被用来控制组件渲染的UI内容，因此不会和React的虚拟DOM diff流程产生任何冲突，不存在传统意义上"手动操作DOM"的副作用。
3. 原生JSX的事件绑定需要传入函数引用，不要和原生HTML的onclick写法混淆传字符串，否则事件不会正常触发。

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