注：UI组件中不能使用ref。

2、使用 ref 来获取组件的引用

//点击按钮获取输入框的焦点
class MyComponent extends React.Component {
  handleClick() {
    // 使用原生的 DOM API 获取焦点
    this.refs.myInput.focus();
  render() {
    //  当组件插入到 DOM 后，ref 属性添加一个组件的引用于到 this.refs
    return (
        <input type="text" ref="myInput" />
        <input
          type="button"
          value="点我输入框获取焦点"
          onClick={this.handleClick.bind(this)}
3、ref的另一种写法
 
const { Tag, Input, Tooltip, Icon } = antd;
class EditableTagGroup extends React.Component {
  state = {
    inputVisible: false,
    inputValue: '',
  handleInputChange = e => {
    this.setState({ inputValue: e.target.value });
  showInput = () => {
    this.setState({ inputVisible: true }, () => this.input.focus());
  saveInputRef = input => (this.input = input);
  render() {
    const { tags, inputVisible, inputValue } = this.state;
    return (
          <Input
            ref={this.saveInputRef}
            type="text"
            size="small"
            style={{ width: 78 }}
            value={inputValue}
            onChange={this.handleInputChange}
          <Tag onClick={this.showInput} style={{ background: '#fff', borderStyle: 
          'dashed' }}>
            <Icon type="plus" /> New Tag
ReactDOM.render(<EditableTagGroup />, mountNode);
 
 npm install vue-react --save
如果尚未安装，请安装react和react-dom软件包。 还安装babel插件。
 npm install react react-dom babel-plugin-transform-react-jsx --save
将插件添加到您的.babelrc文件中： 
    " plugins " : [ " transform-react-jsx " ]
首先，导入并安装插件：
 import Vue
				
工作中不免遇到各种react版本，获取dom元素/值是常见需求。所以今天针对目前的几个版本点提供不同的解决方案。欢迎留言讨论补充。感谢 ^ _ ^
针对多个react版本 - 父组件获取子组件的dom元素/值 React 16.3版本以上第一、子组件非公用组件，使用createRef实现第一、子组件公用组件，使用forwardRef实现React 16.3版本以下第一、子组件非公用组件，使用createRef实现第一、子组件公用组件，使用forwardRef实现
React 16.3版本以上
分两种情况：
				
先来说下从哪获取的启发，想要从父组件获取子组件的值或方法。。。
一次写代码的时候，用 Antd 中的 Modal 包裹了一个子组件，子组件中包含 input 输入框，想要在点击对话框上面确定按钮时（即Modal 自带的 onOk方法），拿到其中输入的值，，，，
下面用一个父组件（Father.js）和子组件（Hearder.js）来演示如何能拿到值和方法：
给子组件添加属性 ref=‘footer’
<Header ref='footer'></Header>
然后在父组
				
import React, {Component} from 'react';
export default class Parent extends Component {
    render() {
        return(
                <Child onRef={this.onRef} /&g...
				
最好连接上一篇文章一起查看，能更好的理解该文章：
react生命周期函数执行过程：
https://editor.csdn.net/md?not_checkout=1&articleId=109010693
1、constructor(props)
React组件的构造函数在挂载之前被调用。在实现React.Component构造函数时，需要先在添加其他内容前，调用super(props)，用来将父组件传来的props绑定到这个类中，使用this.props将会得到。
官方建议不要在construc
				
使用场景：需要重复触发子组件弹窗或者需要在子组件修改值的时候可以采用调用子组件身上特定方法执行操作。
在次介绍一下最新hooks的操作和旧版本class组件调用方式
一.Hooks api调用方式
需要用到的Api:useRef useImperativeHandle forwardRef
简单说明：
1.useRef: 用于获取元素的原生DOM或者获取自定义组件所暴露出来的ref方法(父组件可以通过ref获取子组件，并调用相对应子组件中的方法)
2.useImperativeHandle:在函数式组件中，
this.forceUpdate();
<div className={classnames("bottom grade", { auto: tableData[i][val.enName+'hide']&&tableData[i][val.enName+'hide'] == 2 })}>
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.12.0/lib/index.js"></script>
<div id="app">
 <el-tree :data="data...