你想知道的关于 Refs 的知识都在这了
Refs 提供了一种方式，允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。
Refs 使用场景
在某些情况下，我们需要在典型数据流之外强制修改子组件，被修改的子组件可能是一个 React 组件的实例，也可能是一个 DOM 元素，例如:
- 管理焦点，文本选择或媒体播放。
- 触发强制动画。
- 集成第三方 DOM 库。
设置 Refs
1. createRef
createRef 是 React16.3 版本中引入的。
创建 Refs
使用 React.createRef() 创建 Refs，并通过 ref 属性附加至 React 元素上。通常在构造函数中，将 Refs 分配给实例属性，以便在整个组件中引用。
访问 Refs
当 ref 被传递给 render 中的元素时，对该节点的引用可以在 ref 的 current 属性中访问。
import React from 'react';
export default class MyInput extends React.Component {
constructor(props) {
super(props);
//分配给实例属性
this.inputRef = React.createRef(null);
}
componentDidMount() {
//通过 this.inputRef.current 获取对该节点的引用
this.inputRef && this.inputRef.current.focus();
}
render() {
//把 <input> ref 关联到构造函数中创建的 `inputRef` 上
return (
<input type="text" ref={this.inputRef}/>
)
}
}
<< · Back Index ·>>
