React中ref的使用

1.React中Ref是什么？

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

2.ref的作用对象

　　ref可以作用于：

　　　　React组件的实例

class AutoFocusTextInput extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();
  }

  componentDidMount() {
    this.textInput.current.focusTextInput();
  }

  render() {
    return (
      <CustomTextInput ref={this.textInput} />
    );
  }
}

　　　　　　Dom元素

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

3.作用于React组件

React组件有两种定义方式：

• function
  • 对于用function定义的组件是没有办法用ref获取的，原因是： ref回调函数会在组件被挂载之后将组件实例传递给函数。但是使用function定义的函数并没有实例。
  • 但是仍然可以获取function定义的组件中的DOM元素，下面会讲
• class
  • 用class定义的组件由于可以获取组件实例，因此ref函数会在组件挂载的时候将实例传递给组件

将ref回调函数作用于某一个React组件，此时回调函数会在当前组件被实例化并挂载到页面上才会被调用。

ref回调函数被调用时，会将当前组件的实例作为参数传递给函数。

4.Parent Component 如何获取Child component中DOM元素？

首先，能够使用ref的child Component必然是一个类，如果要实现，必然要破坏child component的封装性，直接到child component中获取其中DOM。

5.破坏封装性的获取方式

• 定义一个ref回调函数
• 并将该函数绑定Parent Component的this
• 将该回调函数传递给子组件
• 子组件中将该函数赋给需要获取的DOM元素的ref

  class App extends Component {
    constructor(props) {
      super(props);
      this.getDOM = this.getDOM.bind(this);
    }
  
    getDOM(element) {
      this.div = element
    }
  
    render() {
      return (
        <div>
          <Button getDOM={this.getDOM} />
        </div>
      );
    }
  }
  //Button.js
  export default (props) => (
    <div>
      <button ref={props.getDOM} onClick={props.onClick}>this is a button</button>
    </div>
  )

  6.不破坏封装性的获取方式

  • 父组件定义一个ref函数，将ref赋值给Child component
  • Child Component中用ref获取到需要的DOM元素
  • Child Component中定义一个getElement的方法，然后将该DOM元素返回
  • 父组件通过获取Child component再调用getElement即可

    //APP.js
    class App extends Component {
      constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
        this.div = React.createRef()
      }
    
      render() {
        return (
          <div>
            <Button ref={this.div}/>
          </div>
        );
      }
    }
    //Button.js
    import React, {Component} from 'react';
    
    export default class Button extends Component {
      constructor(props) {
        super(props);
        this.button = React.createRef();
        this.getButton = this.getButton.bind(this);
      }
    
      getButton() {
        return this.button
      }
    
      render() {
        return (
          <div>
            <button ref={this.button}>this is a button</button>
          </div>
        );
      }
    }