React中ref获取类组件实例

我们先看一下使用示例，然后再解释原理。代码如下：

import React,{PureComponent,createRef} from "react";

class HelloWorld extends PureComponent{
    test(){
        console.log("test-------")
    }
    
    render(){
        return <h1>Hello World</h1>
    }
}

export class App extends PureComponent{
    constructor(){
        super()
        
        this.hwRef = createRef()
    }
    
    getComponent(){
        console.log(this.hwRef.current)
        this.hwRef.current.test()
    }
    
    render(){
        return (
            <div>
                <HelloWorld ref={this.hwRef}></HelloWorld>
                <button onClick={e => this.getComponent()}>获取组件实例</button>
            </div>
        )
    }
}

export default App

上面代码中，我们通过createRef()创建了一个ref引用对象，并将其赋值给this.hwRef。然后在HelloWorld组件上使用<HelloWorld ref={this.hwRef}></HelloWorld>将这个引用传递给子组件。 这就是直接通过ref获取子组件实例的方法。最后我们附上浏览器中运行结果：

感谢您的观看，我们下次再见！