react使用ref控制DOM元素（非受控組件）

總有一些場景我們需要直接操作dom元素，react有類似vue的refs的寫法。

import React, { Component, Fragment } from "react";

class Input extends Component {
  constructor(props) {
    super(props);
    // *現在的寫法 2020-6 
    this.helloDiv= React.createRef();
  }
  componentDidMount() {
    // 操作refs
    let a = this.helloDiv.current;
    console.log(a); //<div>hellow</div>
    a.style.color = "red"; //直接操作dom對象，和VUE的refs一樣
  }
  
  render() {
    return (
      <Fragment>
        {/* 1.管理焦點  2.觸發強制動畫   3.集成第三方dom庫 */}
        <div ref={this.helloDiv}>hellow</div>
      </Fragment>
    );
  }
}

export default Input;