React-Ref - 技术栈

1. React中获取元素的方式

原生DOM（不推荐）

通过ref获取（推荐）

字符串

对象

回调函数
原生DOM获取元素（不推荐）

非常非常不推荐，因为这种情况是通过拿到真实DOM，而react创建元素大多数时候是通过虚拟DOM创建的

复制代码

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(){
   
        // 第一种获取方式: 传统方式(在React中及其不推荐)
        let oP = document.getElementById('box');
        oP.innerHTML = 'www.it666.com';
        console.log(oP);
    }
}
export default App;

第二种方式：通过refs结合字符串进行获取（react即将废弃）

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

复制代码

import React from 'react';
class App extends React.PureComponent{
   
    constructor(props){
   
        super(props);
    }
    render(){
   
        console.log('App-render被调用');
        return (
            <div>
                // 1. 给获取的元素添加refs
                <p ref={
   'box'}>我是段落</p>
                <button onClick={
   ()=>{
   this.btnClick()}}>APP按钮</button>
            </div>
        )
    }
    btnClick(){
   
        // 第二种获取方式: 通过ref='字符串' / this.refs.字符串 (通过字符串的方式即将被废弃, 也不推荐)
        let oP = this.refs.box;
        oP.innerHTML = 'www.it666.com';
        console.log(oP);
    }
}
export default App;

第三种获取方式：通过refs+对象获取

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

复制代码

import React from 'react';
class App extends React.PureComponent{
   
    constructor(props){
   
        super(props);
// 1.先创建一个Ref对象
        this.oPRef = React.createRef();
        this.oPRef = null;
    }
    render(){
   
        console.log('App-render被调用');
        return (
            <div>
                <p ref={
   this.oPRef}>我是段落</p>
                <button onClick={
   ()=>{
   this.btnClick()}}>APP按钮</button>
            </div>
        )
    }
    btnClick(){
   
       // 2. 第三种获取方式: 通过createRef()创建一个对象, 然后将这个对象传递给ref (推荐)
        let oP = this.oPRef.current;
        oP.innerHTML = 'www.it666.com';
        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>
              //参数就是该元素，将arg赋值给OPRef
                <p ref={
   (arg)=>{
   this.oPRef = arg}}>我是段落</p>
                <button onClick={
   ()=>{
   this.btnClick()}}>APP按钮</button>
            </div>
        )
    }
    btnClick(){
   
        // 第四种获取方式: 通过传递一个回调函数, 然后保存回调函数参数的方式(推荐)
        let oP = this.oPRef;
        oP.innerHTML = 'www.it666.com';
        console.log(oP);
    }
}
export default App;

根据浏览器的报错提示Do you mean to use React.forwardRef()?

其实在react中虽然拿不到函数式组件的ref，但是能够通过React.forwardRef()拿到组件内部的内容，如下

复制代码

// props接收父组件的数据；myRef接收外部传进来的ref
const About = React.forwardRef(function(props, myRef) {
    // myRef === this.myRef
    return (
        <div>
            <p>我是段落</p>
            <span ref={
   myRef}>我是span</span>
        </div>
    )
});
class App extends React.PureComponent{
   
    constructor(props){
   
        super(props);
        this.myRef = React.createRef();
    }
    render(){
   
        return (
            <div>
// 在自定义组件外部赋予属性ref={this.myRef}
                <About ref={
   this.myRef}/>
                <button onClick={
   ()=>{
   this.btnClick()}}>APP按钮</button>
            </div>
        )
    }
    btnClick(){
   
        console.log(this.myRef.current);
//   <span>我是span</span>
    }
}
export default App;

这种现象叫做Ref转发