无法使用react中的引用访问或操作dom

Question

我尝试使用 useRef() 钩子访问 dom 以获取 React 中特定元素的高度，并将另一个元素的高度分配给它，因此它的高度会根据参考元素的高度变化动态变化，并且我使用 height.current.clientHeight 属性，但我遇到一条错误消息：

类型错误：无法读取 null 的属性（读取“clientHeight”）

这是代码：

import React from "react";
import Link from "next/link";
import MenuIcon from "./MenuIcon";
import { useState } from "react";
import Image from "next/image";
import bg from "../public/bg.jpg";
import { useRef } from "react";

const Navbar = () => {
  const height = useRef(null);
  const [open, setOpen] = useState(false);
  function handleClick() {
    setOpen(!open);
  }
  return (
    <>
      <MenuIcon bgC="bg-white" handle={handleClick} open={open} />
      <div className="w-full relative h-[40%]" ref={height}>
        <nav className="xs:max-md:hidden flex z-20 justify-between md:max-lg:justify-end md:max-lg:gap-24 text-white bg-transparent backdrop-blur-lg  py-3 px-6 ">
          <div className="hover:text-gray-300 hover:text-[20px] ease-in duration-100">
            <Link href="/">About me</Link>
          </div>
          <div className="hover:text-gray-300 hover:text-[20px] ease-in duration-100">
            <Link href="/">My skills</Link>
          </div>
          <div className="hover:text-gray-300 hover:text-[20px] ease-in duration-100">
            <Link href="/">Portfolio</Link>
          </div>
          <div className="hover:text-gray-300 hover:text-[20px] ease-in duration-100">
            <Link href="/">Contacts</Link>
          </div>
        </nav>

        <Image
          src={bg}
          layout="responsive"
          objectFit="contain"
          width={400}
          height={400}
          alt="/"
        />

        <div className="w-full h-full bg-black/40 absolute top-0 lef-0 right-0">
          <h1 className="text-white w-[75%] font-Neo font-[12px] box-border text-2xl mx-auto text-center translate-y-[140px]">
            Hi there! My name is Alharith and I am a front-end developer.
          </h1>
        </div>
      </div>
      <div
        className={
          open
            ? `w-auto h-${height.current.clientHeight} box-border px-12 bg-blue-400 backdrop-blur-sm fixed top-0 right-0 translate-x-0 duration-300 ease-in flex flex-col items-center justify-around text-2xl`
            : `w-auto h-${height.current.clientHeight} px-12 py-[30px] bg-transparent backdrop-blur-sm fixed top-0 right-0 translate-x-[100%] duration-300 ease-in flex flex-col items-center justify-around text-2xl`
        }
      >
        <div className="w-full flex flex-col justify-around items-center h-[50%] gap-8 text-2xl font-Neo">
          <div className="font-Neo text-2xl hover:text-[20px] hover:text-gray-100 duration-100 ease-in">
            <Link href="/">About me</Link>
          </div>
          <div className="font-Neo text-2xl hover:text-[20px] hover:text-gray-100 duration-100 ease-in">
            <Link href="/">My Skills</Link>
          </div>
          <div className="font-Neo text-2xl hover:text-[20px] hover:text-gray-100 duration-100 ease-in">
            <Link href="/">Portfolio</Link>
          </div>
          <div className="font-Neo text-2xl hover:text-[20px] hover:text-gray-100 duration-100 ease-in">
            <Link href="/">Contacts</Link>
          </div>
        </div>
      </div>
    </>
  );
};

export default Navbar;

我尝试检查“height.current !== null”是否为true，如果为true，则会将clientHeight的值分配给另一个变量，如果不是，则会分配“auto”，如下所示：

const hi = 高度.当前 ?

${height.current.clientHeight}

：“自动”

仍然遇到同样的错误

我原以为它能正常工作，但事实并非如此

Answer 1

useRef

钩子变量不会立即获取

current

属性。这会在初始 DOM 渲染后填充。

要使其正常工作，请在依赖项数组中添加一个带有

useEffect

的

height.current

钩子。

使用带有

useState

钩子和内部

useEffect

钩子的标志，更新标志。

  const [flag, setFlag] = useState(false);
  useEffect(() => {
     if(height.current) setFlag(true);
  }, [height.current]);

// and use the flag in div class
 <div
     className={
          open && flag
            ? `w-auto h-${height.current.clientHeight}... 
        }
  >