当前位置：首页 > news >正文

react中使用ref属性获取元素，并判断该元素内是否含有子元素

news 2025/9/13 7:45:50

在react中，可以使用ref属性来获取到一个元素的引用，然后再使用ref.current来访问该元素的DOM节点，使用DOM API来判断这个元素是否含有子元素，要判断一个元素是否含有子元素，可以使用hasChildNodes()，其返回值为Boolean，下面分别使用类组件与函数组件来实现。

类组件实现代码

import React, { Component, createRef } from 'react'export default class App extends Component {constructor(props){super(props)this.divRef = createRef()}componentDidMount(){if (this.divRef.current) {if (this.divRef.current.hasChildNodes()) {console.log('该元素含有子元素');}else{console.log('该元素不含子元素');}}}render() {return (<div><div ref={this.divRef}><button>子元素</button></div></div>)}
}

函数组件实现代码

import React, {useRef, useEffect} from 'react'export default function App() {const divRef = useRef(null)useEffect(() => {if (divRef.current) {if (divRef.current.hasChildNodes()) {console.log('该元素含有子元素')} else {console.log('该元素不含子元素')}}})return (<div><div ref={divRef}><button>子元素</button></div></div>)
}