上一章讲了ref获取原声DOM3种方式,最常用的是第二种,createRef
本章讲ref获取组件
ref获取类组件
使用方式和createRef获取原生DOM一样,只不过获取到组件后,可以调用组件实例的方法
import React, { PureComponent, createRef } from 'react'
class HelloWorld extends PureComponent {
test () {
console.log('test----')
}
render () {
return (
<div>
<h2>Hello World 组件</h2>
</div>
)
}
}
export class App extends PureComponent {
constructor() {
super()
this.titleRef = createRef()
}
getComponent () {
console.log(this.titleRef.current.test())
}
render () {
return (
<div>
<HelloWorld ref={this.titleRef} />
<button onClick={() => this.getComponent()}>获取元素</button>
</div>
)
}
}
export default App
ref获取函数组件
错误做法
由于函数组件没有组件实例,不是继承来的,因此不能使用createRef,,如下使用会报错:
import React, { PureComponent, createRef } from 'react'
function Hello () {
return (
<div>
<h2>Hello World 函数组件</h2>
</div>
)
}
export class App extends PureComponent {
constructor() {
super()
this.titleRef = createRef()
}
getComponent () {
console.log(this.titleRef.current.test())
}
render () {
return (
<div>
<Hello ref={this.titleRef} />
<button onClick={() => this.getComponent()}>获取元素</button>
</div>
)
}
}
export default App
正确做法:高阶函数forwardRef
首先明确一点,函数组件一般只用来返回UI,做UI展示,所以获取函数组件,一般会获取函数组件返回的UI中某一些
forwardRef使用方式:
- 引入forwardRef
- 函数组件用forwardRef包裹一个无名函数,赋值给一个变量,该变量就是组件名。该无名参数接受两个参数props,ref
- 函数组件返回的UI元素中,增加ref={ref}
- 父组件引用函数组件的时候,增加ref={createRef()}
import React, { PureComponent, createRef, forwardRef } from 'react'
const Hello = forwardRef(
function (props, ref) {
return (
<div>
<h2 ref={ref}>Hello World 函数组件</h2>
</div>
)
}
)
export class App extends PureComponent {
constructor() {
super()
this.titleRef = createRef()
}
getComponent () {
console.log(this.titleRef.current)
}
render () {
return (
<div>
<Hello ref={this.titleRef} />
<button onClick={() => this.getComponent()}>获取元素</button>
</div>
)
}
}
export default App