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>
        );
      }
    }