react 通过 ref 获取 dom 节点的信息_react useref获取dom是undefind

方式1：在 useEffect 中使用通过 useRef 获取的 dom 节点

import { useRef, useState, useEffect } from "react";
 
const test = () => {
 
    const divRef = useRef();
    console.log('1---divRef', divRef);// 1---divRef {current: undefined}
 
    useEffect(() => {     
      console.log('2---divRef', divRef);// 2---divRef {current: div}   
    }, [])
 
    return (
      <div ref={divRef} style={{height: 100}}>
        {divHeight}
      </div>
    )
}
 
export default test;

弊端：在 useEffect 之外获取不到该 dom 节点（注意：useEffect 里的代码是最后执行的）。

方式2：通过回调函数获取 ref 的 dom 节点

ref 属性可以是一个回调函数，这个回调函数会在组件被挂载后立即执行。

const Test = () => {
 
    const one = (c) => {
        console.log('one', c);
    }
 
    return (
        <div ref={one}></div>
    )
}

方式3：

const Test = () => {
 
    componentDidMount = () => {
        this.oneRef();
    }
 
    oneRef = () => {
        console.log('123456789--->', this.refBox);
 
        const text = "hello world!";
        this.refBox.append(text);
        this.refBox.style.cssText = `
            display: block;
            width: 100%;
            text-align: center;
            font-size: 28px;
        `;
    }
    return (
        <div ref={target => this.refBox = target}></div>
    )
}

上述代码中，this.refBox 相当于 e.target 所之乡的当前元素。