【React】react16中如何使用ref

在 React16 新版本中,新引入了 React.createRef 与 React.forwardRef 两个 API,有计划移除老的 string ref,使 ref 的使用更加便捷与明确。如果你的应用已经升级到 React16.3+ 版本,那就放心大胆使用 React.createRef 吧,如果暂时没有的话,建议使用 callback ref 来代替 string ref。

新版的ref内部使用Symbol来作为标识, 可以猜测出,React的用意是想避免string ref可能引起重复的问题

关联ref

使用新版本的ref

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
export default class Reftest extends Component {
constructor(props) {
super(props);
// 创建ref
this.myRef = React.createRef();
}
componentDidMount() {
// 打印ref
console.log(this.myRef)
this.myRef.current.focus();
}
render() {
// 挂载 ref
return <input ref={this.myRef} />;
}
}

传递和转发ref

利用 React.forwardRef 传递复用 ref

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import React, { Component } from 'react'

const TargetComponent = React.forwardRef((props, ref) => {
return <input type="text" ref={ref} />
})

export default class Reftest extends Component {
constructor(props) {
super(props);
// 创建ref
this.myRef = React.createRef();
}
componentDidMount() {
// 改变value
this.myRef.current.value = "传递ref成功"
}
render() {
// 挂载 ref, 让组件也保持ref写法
return <TargetComponent ref={this.myRef} />
}
}

结果如下:

ref复用

参考文献:

你的支持将鼓励我继续创作