JSX是React的一種神奇的偽語言，如果我老實(shí)說，這就是讓我如此熱愛React的原因。在沒有JSX的情況下使用React既麻煩又令人沮喪，而使用JSX則是一種表達(dá)代碼的簡便方法。但是，JSX的一個(gè)缺點(diǎn)是，即使不是很困難，它也會(huì)使間接訪問組件元素成為可能。

事實(shí)是，訪問組件自己的元素實(shí)際上比大多數(shù)人想象的要容易得多。讓我們看一下組件方法如何使用JavaScript訪問其自己的DOM節(jié)點(diǎn)：

方法1：react-dom

react-dom提供了findDomNode 一種查找組件節(jié)點(diǎn)的方法：

// Get ReactDOM import ReactDOM from "react-dom"; // In your component method class MyComponent extends Component {     myMethod() {         const node = ReactDOM.findDOMNode(this);     }      }

使用ReactDOM.findDOMNode(this)，您可以獲取小部件的主節(jié)點(diǎn)，然后可以使用典型的DOM方法：

方法2：  ref

獲取DOM節(jié)點(diǎn)的另一種方法是使用refs。我的React和autofocus帖子中詳細(xì)介紹了一個(gè)示例用法：

const node = ReactDOM.findDOMNode(this); // Get child nodes if (node instanceof HTMLElement) {     const child = node.querySelector('.someClass'); }

向ref 想要處理的元素添加屬性是一種以React為中心的方法來獲取元素的處理。兩種策略都運(yùn)作良好，因此請(qǐng)選擇您喜歡的任何一個(gè)！