我有一个React组件 . 一些元素将通过孩子插入 . 其中一些元素将具有特定的类名 . 如何在最外层的组件中获取这些DOM节点的列表?
<MyComponent> <div classname="snap"/> <p></p> <div classname="snap"/> <p></p> <div classname="snap"/> </MyComponent>
我想知道的是在我的组件中插入了多少个类名为“snap”的元素 .
你可以使用 ReactDOM.findDOMNode . 即使文档鼓励使用 ref ,让我们看看它是如何工作的:
ReactDOM.findDOMNode
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 { // ... }
你可以通过 react-dom 的 react-dom 实现它,如下所示:
react-dom
ReactDOM.findDOMNode(<instance-of-outermost-component>).getElementsByClassName('snap') // Returns the elements
如果你需要计数,
ReactDOM.findDOMNode(<instance-of-outermost-component>).getElementsByClassName('snap').length
Yoy还可以使用 this.props.children 来获取给定类的子节点数:
this.props.children
let snapCount = React.Children.toArray(this.props.children).filter((item) => item.props.className === 'snap').length;
3 回答
你可以使用
ReactDOM.findDOMNode
. 即使文档鼓励使用 ref ,让我们看看它是如何工作的:findDOMNode()
另外,让我们看一下ref,建议:
将参考添加到类组件
你可以通过
react-dom
的react-dom
实现它,如下所示:如果你需要计数,
Yoy还可以使用
this.props.children
来获取给定类的子节点数: