React属性之Refs

最新推荐文章于 2025-04-02 23:00:04 发布

橘猫吃不胖～

最新推荐文章于 2025-04-02 23:00:04 发布

阅读量885

点赞数

CC 4.0 BY-SA版权

分类专栏： React 文章标签： react JSX 前端

本文链接：https://blog.csdn.net/m0_46612221/article/details/123360259

React 专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了React中的Refs属性，包括createRef、回调Refs、已过时的String类型Refs以及React Hooks中的useRef用法。Refs主要用于访问DOM元素或组件实例，确保安全地操作它们。示例代码展示了如何在不同场景下使用各种类型的Refs。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 介绍

react组件的三大属性：

props属性：封装传递给组件的参数
state属性：组件的状态，当值发生改变后，重新渲染组件
refs属性：
（1）通过该属性可以去访问DOM元素或render函数中的react元素（虚拟的DOM元素） ——DOM元素或render函数中的react元素的代理（句柄）
（2）本质是ReactDOM.render()函数返回的实例（组件实例或DOM节点）

Refs在计算机中称为弹性文件系统。React中的Refs提供了一种方式，允许我们访问DOM节点或在render方法中创建的React元素。本质为ReactDOM.render()返回的组件实例，如果是渲染组件则返回的是组件实例，如果渲染dom则返回的是具体的dom节点。

作用：Refs时React提供给我们安全访问DOM元素或者某个组件实例的句柄。在类组件中，React将ref属性中第一个参数作为DOM中的句柄。在函数组件中，React用hooks的api useRef也能获得ref。

2 使用方法

2.1 createRef（版本>=React16.3）

一般在构造函数中将refs分配给实例属性，以供组件的其他方法中使用。

1、对于html元素：可以获取元素实例

示例代码：

class Refs extends React.Component {
    constructor(props) {
        super(props);
        // 在构造函数中初始化一个ref，然后在return中就可以使用了
        this.myRef = React.createRef();
        console.log(this.myRef);
    }
    componentDidMount() { // 在render()函数执行完成后调用
        this.myRef.current.innerHTML = "橘猫吃不胖"; // this.myRef中有一个current属性
    }
    render() {
        return (
            <div>
                {/*如果ref属性被用于html，那么它的值就是底层DOM元素*/}
                <div ref={this.myRef}></div>
            </div>
        );
    }
}

在这里插入图片描述
2、可以和类组件进行绑定 —— 代表类组件的实例

示例代码：

class Refs extends React.Component {
    constructor(props) {
        super(props);
        this.myRef = React.createRef();
    }
    componentDidMount() {
        // 在父组件中调用了子组件的方法
        this.myRef.current.change();
    }
    render() {
        return <Children ref={this.myRef}/>
    }
}

class Children extends React.Component {
    change() {
        console.log("橘猫吃不胖变身");
    }
    render() {
        return <span>橘猫吃不胖</span>
    }
}

2.2 回调Refs

React将在组件挂载时，会调用ref回调函数并传入DOM怨怒是，当卸载时调用它并传入null。早componentDidMount或componentDidUpdate触发前，React会保证refs一定是最新的。

示例代码：

class Refs extends React.Component {
    constructor(props) {
        super(props);
        this.targetRef = null;
        this.myRef = (e) => this.targetRef = e;
    }
    componentDidMount() {
        if (this.targetRef) {
            this.targetRef.innerHTML = "橘猫吃不胖";
        }
    }
    render() {
        return <div ref={this.myRef}/>
    }
}

2.3 String类型的Refs（已过时，不推荐使用）

示例代码：

class Refs extends React.Component {
    constructor(props) {
        super(props);
        this.targetRef = null;
        this.myRef = (e) => this.targetRef = e;
    }
    componentDidMount() {
        console.log("this.refs" + this.refs.container);
    }
    render() {
        return <div ref={this.myRef}>
            橘猫吃不胖
        </div>
    }
}

2.4 useRef（React Hooks）

function HookRef(props) {
    const inputElement = useRef();
    return (
        <div>
            <input ref={inputElement}/>
            <button onClick={() => {
                inputElement.current.focus()
            }}>获得焦点
            </button>
        </div>
    )
}