Catalog
  1. 1. ref是什么
  2. 2. 如何使用ref
  3. 3. ref的应用场景
  4. 4. 推荐阅读
React中的Ref是什么?

ref是什么

  • ref是React提供的用来操纵React组件实例或者DOM元素的接口

如何使用ref

  • 你不能在函数组件上使用 ref 属性,因为他们没有实例
  • 使用:
    1. 使用 React.createRef() 创建
    2. 将ref属性附加到React元素上
      class MyComponent extends React.Component {
          constructor(props) {
              super(props);
              this.myRef = React.createRef();
          }
          render() {
              return <div ref={this.myRef} />;
          }
      }
    3. 使用current属性来访问DOM上绑定的对象
      • ref 属性用于 HTML 元素时,构造函数中使用 React.createRef() 创建的 ref 接收底层 DOM 元素作为其 current 属性。
      • ref 属性用于自定义 class 组件时,ref 对象接收组件的挂载实例作为其 current 属性。

ref的应用场景

  • 管理焦点,选择文本或媒体播放。
  • 触发式动画。
  • 与第三方DOM库集成。

推荐阅读

Author: Erealm
Link: http://erealmsoft.github.io/2019/09/18/react/react-ref/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.

Comment