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

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

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

---

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

您可以通过

react dom

的

findDOMNode

实现它，如下所示：

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

ReactDOM.findDOMNode（）.getElementsByClassName（'snap'）//返回元素

如果你需要计数

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

ReactDOM.findDOMNode（）.getElementsByClassName（'snap'）.length

Yoy还可以使用

this.props.children

获取给定类的子节点数：

let snapCount = React.Children.toArray(this.props.children).filter((item) => item.props.className === 'snap').length;

---

您可以使用

ReactDOM.findDOMNode

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

findDOMNode（）

如果该组件已装入DOM，则返回 对应的本机浏览器DOM元素。这种方法对解决这一问题很有用 从DOM中读取值，例如表单字段值和 执行DOM测量。在大多数情况下，可以将引用附加到 DOM节点，并避免使用findDOMNode

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

---

注意：findDOMNode是用于访问底层DOM的转义图案填充 节点。在大多数情况下，不鼓励使用此逃生舱口，因为 它穿透了组件抽象。findDOMNode仅在上工作 已安装的部件（即已放置在 DOM）。如果您试图在尚未安装的组件上调用此函数 但是（就像在具有 （尚未创建）将引发异常。findDOMNode不能为空 用于功能部件

另外，让我们看看推荐的ref：

向类组件添加引用 当ref属性用于声明为 类时，ref回调将接收已装入的组件实例 作为它的论据。例如，如果我们想包装CustomTextInput 以模拟安装后立即单击它：

---

您想从MyComponent内部了解MyComponent中有多少快照？我得到了类似“未捕获错误：元素似乎既不是ReactComponent也不是DOMNode”的错误。最外层组件的实例是什么？

ReactDOM.findDOMNode(component)

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

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

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