温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

React中的Refs属性怎么用

发布时间:2022-03-10 09:06:04 来源:亿速云 阅读:126 作者:iii 栏目:开发技术

这篇“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>
            );
        }
    }

    React中的Refs属性怎么用

    2、可以和类组件进行绑定 &mdash;&mdash; 代表类组件的实例

    示例代码:

    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() {
            console.log("this.refs" + this.refs.container);
        }
        render() {
            return <div ref={this.myRef}>
                橘猫吃不胖
            </div>
        }
    }

    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属性怎么用”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。

    向AI问一下细节

    免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

    AI