本小节开始前,我们先答复下一个同学的问题。上一小节发布后,有小伙伴后台来信问到:‘小编你只讲了类组件中怎么使用 ref
,那在函数式组件中怎么使用呢?’。确实我们只分享了类组件中获取实例的方式没提函数式组件。那是因为函数组件是一个函数,执行完之后就会被销毁,所以正常我们不能直接获取函数组件的实例的。
那要是想使用的话怎么办呢?我们先看下正常给函数组件绑定 ref
,会是什么效果:
function Fn(props) {
return <h1>function</h1>;
}
costructor() {
this.f = React.createRef()
}
render() {
return (
<div>
<Fn ref={this.f} />
</div>
)
}
查看浏览器我们看到会打印如下的异常警告:这是告诉我们如果想函数组件使用 ref
的话需要使用 forwardRef
方法进行包裹。
function Fn(props, ref) {
// 这里是获取的实例 dom
return <h1 ref={ref}>function</h1>;
}
const Forward = React.forwardRef(Fn);
// 这样就可以获取到实例
<Forward ref={this.f} />
我们打印下返回的 Forward
&