ReactJS，在 React 组件中按类名查找元素

Question

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

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

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

原文由 wvp 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 ReactDOM.findDOMNode 。尽管文档鼓励使用 ref ，但让我们看看它是如何工作的：

查找 DOMNode()

 ReactDOM.findDOMNode(component)

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

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

---

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

另外再看看ref，推荐：

向类组件添加引用

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

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

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

请注意，这仅在 CustomTextInput 被声明为类时才有效：

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

原文由 Alireza 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以通过 findDOMNode 的 react-dom 实现它，如下所示：

 ReactDOM.findDOMNode(<instance-of-outermost-component>).getElementsByClassName('snap') // Returns the elements

如果你需要计数，

 ReactDOM.findDOMNode(<instance-of-outermost-component>).getElementsByClassName('snap').length

原文由 Abhishek 发布，翻译遵循 CC BY-SA 3.0 许可协议