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

Question

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

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

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

Answer 1

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

findDOMNode（）

ReactDOM.findDOMNode(component)

如果此组件已安装到DOM中，则将返回相应的本机浏览器DOM元素。此方法对于从DOM中读取值（例如表单字段值）和执行DOM测量很有用。在大多数情况下，您可以将引用附加到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 {
  // ...
}