如何在Ref初始化后执行setState？解决React依赖项ESLint警告

下面提供几种可行的解决方案，既满足功能需求又能避免ESLint警告：

方案一：使用回调式ref（推荐） #

直接通过回调ref在元素挂载时获取DOM节点并设置状态，无需依赖useEffect：

import { useState, useCallback } from 'react';

function YourComponent() {
  const [headerHeight, setHeaderHeight] = useState(0);

  // 回调ref会在元素挂载/卸载时触发
  const headerRef = useCallback((element) => {
    if (element) {
      setHeaderHeight(element.offsetHeight);
    }
  }, []);

  return (
    <>
      <Header ref={headerRef} />
      <YourTargetComponent style={{ marginTop: `${headerHeight}px` }} />
    </>
  );
}

回调ref的优势在于：元素挂载时自动传入DOM节点，无需担心初始为null的问题；依赖数组为空也不会触发不必要的重渲染，完全符合ESLint规范。

方案二：useEffect配合ESLint注释 #

如果坚持使用useRef，可以给useEffect添加空依赖数组，同时用注释告知ESLint你明确知晓当前逻辑：

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

function YourComponent() {
  const [headerHeight, setHeaderHeight] = useState(0);
  const headerRef = useRef(null);

  useEffect(() => {
    if (headerRef.current) {
      setHeaderHeight(headerRef.current.offsetHeight);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <>
      <Header ref={headerRef} />
      <YourTargetComponent style={{ marginTop: `${headerHeight}px` }} />
    </>
  );
}

这里空依赖数组是安全的：组件挂载时ref.current已经被赋值为DOM节点，useEffect执行时能正确获取高度；注释的作用是避免ESLint误判为遗漏依赖。

方案三：监听元素尺寸变化（动态场景） #

如果目标元素高度可能动态改变（比如窗口缩放、内容更新），需要添加resize监听来实时更新状态：

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

function YourComponent() {
  const [headerHeight, setHeaderHeight] = useState(0);
  const headerRef = useRef(null);

  useEffect(() => {
    const updateHeaderHeight = () => {
      if (headerRef.current) {
        setHeaderHeight(headerRef.current.offsetHeight);
      }
    };

    // 初始获取一次高度
    updateHeaderHeight();
    // 监听窗口缩放
    window.addEventListener('resize', updateHeaderHeight);

    // 组件卸载时移除监听
    return () => {
      window.removeEventListener('resize', updateHeaderHeight);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <>
      <Header ref={headerRef} />
      <YourTargetComponent style={{ marginTop: `${headerHeight}px` }} />
    </>
  );
}

这种方案能确保元素高度变化时，目标组件的外边距也同步更新，适合高度不固定的场景。

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