ReactJS，在React组件中按类名查找元素 [英] ReactJS, find elements by classname in a React Component

问题描述

我有一个React组件。一些元素将通过孩子插入。其中一些元素将具有特定的类名。
如何在最外层组件中获取这些DOM节点的列表？

I've a React component. Some elements will be inserted through the children. Some of these elements will have a specific classname. How can I get a list of these DOM nodes in my outermost Component?

<MyComponent>
  <div classname="snap"/>
  <p></p>
  <div classname="snap"/>
  <p></p>
  <div classname="snap"/>
</MyComponent>

我想知道的是在我的组件中插入了多少个类名为snap的元素。

What I want to know is how many elements with the classname "snap" are inserted in my component.

推荐答案

您可以使用 ReactDOM.findDOMNode 。即使文档鼓励使用参考，让我们看看它是如何工作的：

You can use ReactDOM.findDOMNode. Even though the documentation encourage using ref, let's see how it works:

findDOMNode（）

ReactDOM.findDOMNode(component)

如果此组件已安装到DOM中，则返回
对应的本机浏览器DOM元素。此方法对于读取DOM外的
值非常有用，例如表单字段值和
执行DOM测量。在大多数情况下，你可以将一个引用附加到
DOM节点，并且完全避免使用findDOMNode。

If this component has been mounted into the DOM, this returns the corresponding native browser DOM element. This method is useful for reading values out of the DOM, such as form field values and performing DOM measurements. In most cases, you can attach a ref to the DOM node and avoid using findDOMNode at all.

当组件呈现为null或false时，findDOMNode返回空值。
当组件呈现给字符串时，findDOMNode返回包含该值的文本DOM
节点。从React 16开始，组件可以返回带有多个子节点的
片段，在这种情况下，findDOMNode将返回
与第一个非空子节点对应的DOM节点。

When a component renders to null or false, findDOMNode returns null. When a component renders to a string, findDOMNode returns a text DOM node containing that value. As of React 16, a component may return a fragment with multiple children, in which case findDOMNode will return the DOM node corresponding to the first non-empty child.

---

---

注意： findDOMNode是一个用于访问底层DOM
节点。在大多数情况下，不鼓励使用此逃生舱，因为
它会刺穿组件抽象。 findDOMNode仅适用于
已挂载的组件（即已放置在
DOM中的组件）。如果您尝试在尚未挂载
的组件上调用此方法（如在尚未创建
的组件上调用render（）中的findDOMNode（））将引发异常。 findDOMNode不能用于功能组件的
。

Note: findDOMNode is an escape hatch used to access the underlying DOM node. In most cases, use of this escape hatch is discouraged because it pierces the component abstraction. findDOMNode only works on mounted components (that is, components that have been placed in the DOM). If you try to call this on a component that has not been mounted yet (like calling findDOMNode() in render() on a component that has yet to be created) an exception will be thrown. findDOMNode cannot be used on functional components.

另外，让我们看看ref，建议：

Also let's look at the ref, which is recommended:

在自定义组件上使用ref属性时声明为
类，ref回调接收组件
的已挂载实例作为其参数。例如，如果我们想在上面包装CustomTextInput
来模拟它在安装后立即被点击：

When the ref attribute is used on a custom component declared as a class, the ref callback receives the mounted instance of the component as its argument. For example, if we wanted to wrap the CustomTextInput above to simulate it being clicked immediately after mounting:

class AutoFocusTextInput extends React.Component {
    componentDidMount() {
      this.textInput.focusTextInput();
    }

    render() {
      return (
        <CustomTextInput
          ref={(input) => { this.textInput = input; }} />
      );
    }
}

请注意，这只是如果将CustomTextInput声明为类，则有效：

Note that this only works if CustomTextInput is declared as a class:

class CustomTextInput extends React.Component {
  // ...
}

这篇关于ReactJS，在React组件中按类名查找元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！