Refs and the DOM
Refs 提供了一种方式,允许我们访问DOM节点火灾render 方法中创建的React 元素。
在典型的 React 数据流中,props 是父组件于子组件交互的唯一方式。要修改一个子组件,你需要使用新的props来重新渲染它。但是,在某些情况下,你需要在典型数据流之外强制修改子组件。被修改的子组件可能是一个 React 组件的实例,也可能是一个 DOM 元素。对于这两种情况,React 都提供了解决办法。
什么时候使用 Refs
下面是几个适合使用 refs 的情况:
- 管理焦点,文本选择或媒体播放。
- 触发强制动画。
- 集成第三方 DOM 库。
避免使用 refs 来做任何可以通过声明式实现来完成的事情。
举个例子,避免在 Dialog 组件里暴露 open()和 close()方法,最好传递 isOpen 属性。
不要过度使用 Refs
你可能首先会想到使用 refs 在你的 app 中 “让事情发生” 如果是这种情况,考虑一下 state 属性应该被安排在那个组件层。通常情况下,让更高的组件层级拥有这个 state ,是更恰当的。
创建 Refs
Refs 是使用 React.createRef() 创建的,并通过 ref 属性附加到 React 元素。在构造组件时,通常将 Refs 分配给实例属性,以便可以在整个组件中引用它们。
class MyComponent extends React.Component {
constructor(props) {
super(porps);
this.myRef = React.createRef();
}
render() {
return <div ref={
this.myRef} />;
}
}
访问 Refs
当 ref 被传递给 render 中的元素时,对该节点的引用可以在 ref 的 current 属性中被访问。
const node = this.myRef.current;
ref 的值根据节点的类型而有所不同:
- 当 ref 属性用于 HTML 元素时,构造函数中使用 React.createRef() 创建的ref 接受底层 DOM 元素作为 current 属性。
- 当 ref属性用于自定义 class 组件时,ref 对象接受组件的挂载实例作为其 current 属性。
- 你不能在函数组件上使用 ref 属性,因为他们没有实例。
为 DOM 元素添加 ref
使用 ref 去存储 DOM 节点的引用:
class CustomTextInput extends React.Component {
constructor(porps){
super(props);
//创建一个 ref 来存储 textInput 的 DOM 元素
this.textInput = React.createRef();
this.focusTextInput = this.focusTextInput