首页 文章

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

提问于
浏览
7

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

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

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

3 回答

  • 7

    你可以使用 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 {
      // ...
    }
    
  • 1

    你可以通过 react-domreact-dom 实现它,如下所示:

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

    如果你需要计数,

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

    Yoy还可以使用 this.props.children 来获取给定类的子节点数:

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

相关问题