如何在React中全局共享useRef？

方案1：使用React Context（推荐，符合React数据流） #

这种方式既遵循React的状态管理规范，又能避免prop drilling，还不用修改Compo2的代码。

步骤1：创建Ref Context #

// RefContext.js
import { createContext, useContext } from 'react';

const RefContext = createContext(null);

// 封装自定义Hook简化Context获取
export const useRefContext = () => useContext(RefContext);

export default RefContext;

步骤2：在共同父组件中提供Ref #

在两个组件的顶层/共同父组件中声明useRef，并通过Context Provider传递：

// App.jsx
import { useRef } from 'react';
import RefContext from './RefContext';
import Compo1 from './Compo1';
import Compo2 from './Compo2';

function App() {
  const someRef = useRef(null);

  return (
    <RefContext.Provider value={someRef}>
      <Compo1 />
      {/* 包装Compo2，从Context取ref后传递给props */}
      <Compo2Wrapper />
    </RefContext.Provider>
  );
}

// 因为不能修改Compo2，所以新增包装组件做中转
function Compo2Wrapper() {
  const someRef = useRefContext();
  return <Compo2 someRef={someRef} />;
}

export default App;

步骤3：修改Compo1绑定Context中的Ref #

// Compo1.jsx
import { useRefContext } from './RefContext';

export const Compo1 = () => {
  const someRef = useRefContext();
  return (
    <div ref={someRef}>
      text 1
    </div>
  );
};

方案2：使用全局普通对象（简单直接，适合小型项目） #

如果项目规模小，且不需要考虑服务端渲染/多实例冲突，可以用普通JS对象存储ref（绕过Hook规则限制）：

步骤1：创建全局Ref容器 #

// globalRef.js
// 普通JS对象，不受Hook规则约束，可全局导出
export const globalRef = { current: null };

步骤2：在Compo1中绑定全局对象 #

// Compo1.jsx
import { globalRef } from './globalRef';

export const Compo1 = () => {
  return (
    <div ref={globalRef}>
      text 1
    </div>
  );
};

步骤3：直接给Compo2传递全局对象 #

// App.jsx
import Compo1 from './Compo1';
import Compo2 from './Compo2';
import { globalRef } from './globalRef';

function App() {
  return (
    <>
      <Compo1 />
      <Compo2 someRef={globalRef} />
    </>
  );
}

export default App;

注意：全局对象方式存在全局状态污染风险，多个组件实例会共享同一个ref值，服务端渲染场景下不建议使用。

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