react中findDomNode

在使用react過程中，大家有時會

import { findDomNode } from 'react-dom';

　　那么這里的findDomNode是做什么的呢？

　　簡單來說是用來得到實際Dom的，因為react組件有個特點，它有自定義組件，比如<NavBox/>這種，用ref來獲取這種組件獲取到的這是組件定義的對象的實例，見下面代碼

getNodeInstance() {
    const nodeInstance = this.refs.navBox;
}    


function WapShop() {
    return (
        <div>
              <NavBox ref="navBox" />
        </div>
    );
}

　　這里的nodeInstance就是一個NavBox的實例，但是如果這樣：

let initialNode  =  findDomNode(this.refs.navBox);

　　此時initailNode會得到NavBox組件中render方法返回的dom元素。

　　那我們拿到這個dom就是可以獲取諸如offsetWidth這種需要的屬性了。豈不快哉！