React-ref

import React, { Component } from "react";
import ReactDOM from 'react-dom';

class Child extends Component {
  render() {
    return <p ref='ppp'>hhh</p>
  }
}

class HocPage extends Component {
  componentDidMount(){
    console.log('hhh1和ffff',this.refs);
    // this.refs : 寻找挂在HocPage上面的ref(这里包括hh1和ffff)
    console.log('hh1',this.refs.hh1);
    // this.refs.hh1 : 寻找挂在HocPage上面的名为‘hh1’的ref,这里找到的是真实的节点
    console.log('ffff',this.refs.ffff);
    // this.refs.ffff : 寻找挂在HocPage上面的名为‘ffff’的ref,这里找到的是组件
    console.log('ppp',ReactDOM.findDOMNode(this.refs.ffff));
    // 找到组件Child所生成的真实的dom元素
  }
  render() {
    return (
      <div>
        <h1 ref='hh1'>HocPage</h1>
        <Child ref='ffff'/>
      </div>
    );
  }
}

export default HocPage;

控制台依次输出数据：

一、

二、

三、

四、