如何在React自定义Hook中以React式方法访问DOM元素？

针对你遇到的「跨组件触发动态设置高度，需避免props层层传递和document.getElementById」的问题，以下是几种符合React设计理念的解决方案：

1. 用Context共享Ref集合（覆盖所有组件场景） #

核心思路是创建一个全局可访问的Context，统一管理需要被操作的DOM元素Ref，组件主动将自身Ref注册到Context中，你的高度设置Hook直接从Context中获取目标Ref进行操作，无需依赖DOM ID或层层传参。

实现步骤： #

第一步：创建Ref管理Context

import { createContext, useContext, useState, useCallback } from 'react';

// 创建Context，初始值为空对象
const ElementRefContext = createContext({
  refMap: {},
  registerRef: () => {},
  unregisterRef: () => {}
});

// 提供Context的Provider组件
export function ElementRefProvider({ children }) {
  const [refMap, setRefMap] = useState({});

  // 注册Ref：接收唯一标识和Ref实例
  const registerRef = useCallback((key, ref) => {
    if (ref.current) {
      setRefMap(prev => ({ ...prev, [key]: ref.current }));
    }
  }, []);

  // 卸载时移除Ref，避免内存泄漏
  const unregisterRef = useCallback((key) => {
    setRefMap(prev => {
      const newMap = { ...prev };
      delete newMap[key];
      return newMap;
    });
  }, []);

  return (
    <ElementRefContext.Provider value={{ refMap, registerRef, unregisterRef }}>
      {children}
    </ElementRefContext.Provider>
  );
}

第二步：组件注册自身Ref

无论是否是子组件，只要包裹在ElementRefProvider下，都可以注册Ref：

import { useRef, useEffect } from 'react';
import { useContext } from 'react';
import { ElementRefContext } from './ElementRefContext';

// 任意组件（子/非子）
export function TargetComponent({ uniqueKey }) {
  const targetRef = useRef(null);
  const { registerRef, unregisterRef } = useContext(ElementRefContext);

  useEffect(() => {
    registerRef(uniqueKey, targetRef);
    return () => unregisterRef(uniqueKey);
  }, [uniqueKey, registerRef, unregisterRef]);

  return <div ref={targetRef}>{/* 组件内容 */}</div>;
}

第三步：在你的高度设置Hook中使用Context里的Ref

import { useContext } from 'react';
import { ElementRefContext } from './ElementRefContext';
import { useAnotherHook } from './useAnotherHook'; // 你需要调用的其他Hook

export function useDynamicHeight() {
  const { refMap } = useContext(ElementRefContext);
  const { someValue } = useAnotherHook(); // 调用其他Hook

  const setHeight = useCallback((targetKey, height) => {
    const element = refMap[targetKey];
    if (element) {
      element.style.height = `${height}px`;
    }
  }, [refMap, someValue]);

  return { setHeight };
}

优点： #

• 完全基于React原生API，避免直接操作DOM
• 无需层层传递回调或Ref，非子组件也能轻松访问
• 统一管理Ref，可通过uniqueKey精准定位目标元素

2. 子组件场景：Ref转发（React.forwardRef） #

如果是嵌套子组件的场景，可以用React.forwardRef直接将Ref透传到目标DOM，避免props层层传递回调：

// 子组件：用forwardRef转发Ref
export const ChildComponent = React.forwardRef((props, ref) => {
  return <div ref={ref}>{props.children}</div>;
});

// 父组件：直接获取子组件的Ref
export function ParentComponent() {
  const childRef = useRef(null);
  const { setHeight } = useDynamicHeight();

  const handleSetHeight = () => {
    if (childRef.current) {
      setHeight(childRef.current, 200); // 直接传递Ref实例给Hook
    }
  };

  return (
    <>
      <ChildComponent ref={childRef} />
      <button onClick={handleSetHeight}>设置高度</button>
    </>
  );
}

优点： #

• 子组件场景下代码更简洁，符合React的Ref转发规范
• 无需额外的Context，适合简单的嵌套组件结构

3. 自定义Hook封装Ref管理逻辑 #

可以把Context的注册/获取逻辑封装成独立Hook，进一步简化组件和业务Hook的代码：

// 自定义Hook：封装Ref注册逻辑
export function useRegisterElementRef(uniqueKey) {
  const ref = useRef(null);
  const { registerRef, unregisterRef } = useContext(ElementRefContext);

  useEffect(() => {
    registerRef(uniqueKey, ref);
    return () => unregisterRef(uniqueKey);
  }, [uniqueKey, registerRef, unregisterRef]);

  return ref;
}

// 组件中使用
export function TargetComponent({ uniqueKey }) {
  const targetRef = useRegisterElementRef(uniqueKey);
  return <div ref={targetRef}>{/* 内容 */}</div>;
}

为什么不推荐document.getElementById？ #

1. 依赖DOM ID的唯一性，大型项目中容易出现ID冲突
2. 直接操作DOM会绕过React的更新机制，可能导致组件状态与DOM实际状态不一致
3. 无法利用React的生命周期进行清理，容易引发内存泄漏

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