React Ref-Basic
文章目录

React-Ref 的理解

什么时候用 ref

可以使用 Ref 的情况:

  1. 管理组件 focus, 文本选择状态或者媒体管理状态
  2. 声明式动画
  3. 三方库集成
  4. ref 暴露给 parentComponent 并且在 parentComponent 里面操作 childComponent

使用 ref 之前切记要确定一下对应的属性是不是可以使用 prop 代替, 开发时应该尽可能遵从 React 推荐的信息流

添加 ref 的方法

字符串类型(不推荐)

1
<input ref="inputRef" /> //this.refs['inputRef']来访问

回调函数

React 支持给任意组件添加特殊属性。ref 属性接受一个回调函数,它在组件被加载或卸载时会立即执行。

  • 当给 HTML 元素添加 ref 属性时, ref 回调接收了底层的 DOM 元素作为参数.
  • 当给组件添加 ref 属性时, ref 回调接收当前组件实例作为参数.
  • 当组件卸载的时候, 会传入 null
  • ref 回调会在 componentDidMount 或 componentDidUpdate 这些生命周期回调之前执行
1
<input ref={(input)=> {this.textInput = input;}} type="text" /> //HTML 元素添加 ref 属性时
1
<CustomInput ref={(input)=> {this.textInput = input;}} /> //组件添加 ref 属性

React.createRef()

16.3 版本之后才能用

  1. 在 React 16.3 版本后,使用此方法来创建 ref。将其赋值给一个变量,通过 ref 挂载在 dom 节点或组件上,该 ref 的 current 属性

    将能拿到 dom 节点或组件的实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
class Child extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef(); // 定义一个 myRef 为 ref
}
componentDidMount() {
console.log(this.myRef.current);
}
render() {
return <input ref = {
this.myRef
}
/> / / 复制给 DOM 的 ref
}
}

React.forwardRef()

同样 v15 之后才可以使用这个方法是直接生成一个新的组件, 比起普通 component 多传了一个参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 格式: React.forward((props, ref) => ReactComponent)
// 接受 props 和 ref 作为参数
// 返回一个 React 组件

const FancyButton = React.forwardRef((props, ref) => ( <
button class = "fancybutton"
ref = {
ref
} > // ref 就直接可以用了
{
props.children
} <
/button>
));