React组件内部的各生命周期方法,this
指向的是当前组件的实例。
class Page extends Component {
constructor(props){
super(props);
console.assert(this instanceof Page);
}
render() {
console.assert(this instanceof Page);
return (
<span>hello world</span>
);
}
}
在某些情况下,需要引用组件相对应的DOM对象,这时候可以使用ref
属性。
class Page extends Component {
constructor(props) {
super(props);
}
componentDidMount() {
alert(this._dom); //[object HTMLSpanElement]
}
render() {
return (
<span ref={span => this._dom = span}>hello world</span>
);
}
}
组件被挂载后,ref
属性中的回调函数会立即执行,回调函数的参数就是DOM对象。
其中,this
指向组件对象,我们在回调函数中,将DOM对象赋值到了组件对象的某个属性中(例如:_dom
属性),
这样,我们在componentDidMount
生命周期函数中,就可以通过组件的这个属性(例如:_dom
属性)来访问DOM对象了。
注:
(1)ref
的属性值可以不是回调函数,而是一个字符串,用来表示组件的名字,
React会在组件挂载后,把该组件对象放到this.refs
的同名属性中,
然后再用ReactDOM.findDOMNode
,就可以得到该组件对应的DOM对象了。
class Page extends Component {
componentDidMount(){
let mySpan=this.refs['mySpan'],
mySpanDOM =ReactDOM.findDOMNode(mySpan);
alert(mySpanDOM); //[object HTMLSpanElement]
}
render() {
return (
<span ref="mySpan"></span>
);
}
}
(2)ReactDOM.findDOMNode在组件挂载后才可以使用,在constructor中使用会报错。
Uncaught Error: findDOMNode was called on an unmounted component.