传递自定义Hook返回的Ref时，dialog.ref触发ESLint 'Cannot access refs during render'错误但解构方式正常的问题咨询

我之前也碰到过类似的ESLint误报情况，咱们来拆解下问题根源和可行的解决办法：

为什么会出现这个错误？ #

ESLint的react-hooks/refs规则核心是防止你在渲染期间访问ref.current——因为Ref的current值在渲染阶段不稳定，直接访问可能导致组件更新异常。但这里规则出现了误判：你只是传递dialog.ref这个Ref对象本身，并没有碰它的current属性，但规则的静态分析逻辑把dialog.ref这种属性访问模式，当成了类似ref.current的“访问Ref值”操作，所以抛出了错误。

而解构写法const { ref } = useDialog()能正常工作，是因为ESLint规则能识别出这只是获取Ref对象的引用，没有尝试访问它的内部属性，所以不会触发报错。

几种可行的解决方案 #

1. 对多实例Ref解构重命名（推荐）

如果需要处理多个对话框实例，你可以对每个Hook返回的对象解构时重命名Ref，既避开ESLint误报，又保持代码清晰：

export function MyComponent() {
  const dialogA = useDialog();
  const dialogB = useDialog();
  
  // 解构时给Ref起不同别名
  const { ref: dialogARef } = dialogA;
  const { ref: dialogBRef } = dialogB;

  return (
    <>
      <Dialog ref={dialogARef} />
      <Dialog ref={dialogBRef} />
      <button onClick={dialogA.handleOpen}>打开对话框A</button>
      <button onClick={dialogB.handleOpen}>打开对话框B</button>
    </>
  );
}

2. 临时禁用该行ESLint规则

如果你确定自己的写法没问题，只是规则误报，可以在报错行添加注释禁用规则：

<Dialog ref={dialog.ref} /> {/* eslint-disable-next-line react-hooks/refs */}

不过这种方式属于“绕过规则”，建议只在必要时使用，优先选择解构方案。

3. 调整自定义Hook的返回结构（可选）

你也可以修改useDialog的返回值，把Ref改个名字避开规则的检测逻辑：

export type UseDialogReturnType = {
  dialogRef: RefObject<HTMLDialogElement | null>; // 将ref重命名为dialogRef
  isOpen: boolean;
  handleOpen: () => void;
  handleClose: () => void;
};

export function useDialog(): UseDialogReturnType {
  const ref = useRef<HTMLDialogElement>(null);
  // ...其他逻辑不变
  return { dialogRef: ref, isOpen, handleOpen, handleClose };
}

之后使用dialog.dialogRef就不会触发规则了——不过这需要修改Hook的返回结构，适合还在开发初期的项目。

补充说明 #

你的代码逻辑本身是完全正确的，只是ESLint规则的静态分析没有区分“传递Ref对象”和“访问Ref的current属性”这两种场景。具体选哪种方案，可以根据你的项目代码风格和实际需求来决定~

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