React属性之Refs

Posted 橘猫吃不胖~

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React属性之Refs相关的知识,希望对你有一定的参考价值。

React属性之Refs

1 介绍

react组件的三大属性:

  1. props属性:封装传递给组件的参数
  2. state属性:组件的状态,当值发生改变后,重新渲染组件
  3. 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>
    )


以上是关于React属性之Refs的主要内容,如果未能解决你的问题,请参考以下文章

React系统学习4(組件三大核心属性之refs)

React系统学习4(組件三大核心属性之refs)

React系统学习4(組件三大核心属性之refs)

React系统学习4(組件三大核心属性之refs)

refs之新旧差异

React三大属性——state、props与refs