如何获取React组件的元素

JSX是React的一种神奇的伪语言，如果我老实说，这就是让我如此热爱React的原因。在没有JSX的情况下使用React既麻烦又令人沮丧，而使用JSX则是一种表达代码的简便方法。但是，JSX的一个缺点是，即使不是很困难，它也会使间接访问组件元素成为可能。

事实是，访问组件自己的元素实际上比大多数人想象的要容易得多。让我们看一下组件方法如何使用JavaScript访问其自己的DOM节点：

方法1：react-dom

react-dom提供了findDomNode 一种查找组件节点的方法：

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

使用ReactDOM.findDOMNode(this)，您可以获取小部件的主节点，然后可以使用典型的DOM方法：

方法2：  ref

获取DOM节点的另一种方法是使用refs。我的React和autofocus帖子中详细介绍了一个示例用法：

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

向ref 想要处理的元素添加属性是一种以React为中心的方法来获取元素的处理。两种策略都运作良好，因此请选择您喜欢的任何一个！