6.REF

import React from 'react';
import ReactDOM from 'react-dom';

/* 
  ref=‘xxx’ 这种方式 我们通过 this.refs.xxx 获取对应的DOM 或者 组件；将来要被废弃
  ref={(el)=>{this.xxx=el}} 直接通过 this.xxx 即可调到对应的组件或者DOM元素
  
  第三种 ：
  先在constructor中 编写 this.xxx = React.createRef();
  使用的时候  ref={this.xxx}  通过 this.xxx.current 即可调到对应的组件或者DOM元素

*/
class Child extends React.Component{
  render(h) {
    return <h1>
      子组件
    </h1>
  }
}

class App extends React.Component {
    constructor() {
        super();
        this.myRef = React.createRef();// 最先写法
        this.myRef2 = React.createRef();// 最先写法
    }
    fn=()=>{
      console.log(this)
    }
    render() {
        return <div className=''>
          <button onClick={this.fn}>获取</button>
          {/* <Child ref='child'/>
          <h2 ref='h2'>666</h2> */}

          {/* <Child ref={(el)=>{this.child = el}}/>
          <h2 ref={(ele)=>{this.h2 = ele}}>666</h2> */}

          <Child ref={this.myRef}/>
          <h2 ref={this.myRef2}>666</h2>
        </div>;
    }
}

ReactDOM.render(<App/>,document.getElementById('root'))