React-组件-Ref

2023-10-11 32

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： React-组件-Ref

React 中获取元素的方式

字符串
对象
回调函数

官方文档：https://zh-hans.reactjs.org/docs/refs-and-the-dom.html#gatsby-focus-wrapper

第一种

传统方式(在 React 中及其不推荐)

import React from "react";
class App extends React.PureComponent {
    constructor(props) {
        super(props);
    }
    render() {
        console.log('App-render-被调用');
        return (
            <div>
                <p id={'box'}>我是段落</p>
                <button onClick={() => {
                    this.btnClick()
                }}>APP按钮
                </button>
            </div>
        )
    }
    btnClick() {
        let oP = document.getElementById('box');
        oP.innerHTML = 'www.it6666.top';
        console.log(oP);
    }
}
export default App;

第二种

通过 ref='字符串' / this.refs.字符串 (通过字符串的方式即将被废弃, 也不推荐)

import React from "react";
class App extends React.PureComponent {
    constructor(props) {
        super(props);
    }
    render() {
        console.log('App-render-被调用');
        return (
            <div>
                <p ref={'box'}>我是段落</p>
                <button onClick={() => {
                    this.btnClick()
                }}>APP按钮
                </button>
            </div>
        )
    }
    btnClick() {
        let oP = this.refs.box;
        oP.innerHTML = 'www.it6666.top';
        console.log(oP);
    }
}
export default App;

第三种

通过 createRef() 创建一个对象, 然后将这个对象传递给 ref (推荐)

import React from "react";
class App extends React.PureComponent {
    constructor(props) {
        super(props);
        this.oPRef = React.createRef();
    }
    render() {
        console.log('App-render-被调用');
        return (
            <div>
                <p ref={this.oPRef}>我是段落</p>
                <button onClick={() => {
                    this.btnClick()
                }}>APP按钮
                </button>
            </div>
        )
    }
    btnClick() {
        let oP = this.oPRef.current;
        oP.innerHTML = 'www.it6666.top';
        console.log(oP);
    }
}
export default App;

第四种

通过传递一个回调函数, 然后保存回调函数参数的方式(推荐)

import React from "react";
class App extends React.PureComponent {
    constructor(props) {
        super(props);
        this.oPRef = null;
    }
    render() {
        console.log('App-render-被调用');
        return (
            <div>
                <p ref={(args) => {
                    this.oPRef = args
                }}>我是段落</p>
                <button onClick={() => {
                    this.btnClick()
                }}>APP按钮
                </button>
            </div>
        )
    }
    btnClick() {
        this.oPRef.innerHTML = 'www.it6666.top';
        console.log(this.oPRef);
    }
}
export default App;

React 中 Ref 注意点

获取原生元素, 拿到的是元素本身

import React from "react";
class App extends React.PureComponent {
    constructor(props) {
        super(props);
        this.myRef = React.createRef();
    }
    render() {
        return (
            <div>
                <p ref={this.myRef}>我是段落</p>
                <button onClick={() => {
                    this.btnClick()
                }}>APP按钮
                </button>
            </div>
        )
    }
    btnClick() {
        console.log(this.myRef.current);
    }
}
export default App;

获取类组件元素, 拿到的是组件的实例对象

import React from "react";
class Home extends React.PureComponent {
    render() {
        return (
            <div>Home</div>
        )
    }
}
class App extends React.PureComponent {
    constructor(props) {
        super(props);
        this.myRef = React.createRef();
    }
    render() {
        return (
            <div>
                <Home ref={this.myRef}/>
                <button onClick={() => {
                    this.btnClick()
                }}>APP按钮
                </button>
            </div>
        )
    }
    btnClick() {
        console.log(this.myRef.current);
    }
}
export default App;

获取函数组件元素, 拿不到任何内容

import React from "react";
function About() {
    return (
        <div>About</div>
    )
}
class App extends React.PureComponent {
    constructor(props) {
        super(props);
        this.myRef = React.createRef();
    }
    render() {
        return (
            <div>
                <About ref={this.myRef}/>
                <button onClick={() => {
                    this.btnClick()
                }}>APP按钮
                </button>
            </div>
        )
    }
    btnClick() {
        console.log(this.myRef.current);
    }
}
export default App;