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;
控制台依次输出数据:
一、
二、
三、
四、