React-组件-Ref

原创

杨不易呀

发布于 2023-09-30 14:24:29

5040

文章被收录于专栏：杨不易呀杨不易呀

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;