React的ref使用

1、基本使用

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

详解：

• 通过React.createRef()创建ref；
• 将ref赋值给dom元素的ref属性；
• this.myRef.current就可以简单的认为是div。

2、函数组件的使用

官方文档中有以下一段：

• 当 ref 属性用于 HTML 元素时，构造函数中使用 React.createRef() 创建的 ref 接收底层 DOM 元素作为其 current 属性。
• 当 ref 属性用于自定义 class 组件时，ref 对象接收组件的挂载实例作为其 current 属性。
• 你不能在函数组件上使用 ref 属性，因为他们没有实例。

由于现在react的hook大行其道，函数组件成为组件的常见形式。那么想使用ref怎么办，官方文档也给出了解决方案。

先给出一段代码：

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

// 你可以直接获取 DOM button 的 ref：
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

详解：

• 使用React.forwardRef()包裹函数组件，使其能接受到父组件传递的ref；
• 将父组件中创造的ref赋值给你想要控制的子组件中的dom元素；
• 现在你就可以通过ref在父组件中控制子组件中的dom元素了。