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

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

类组件实现代码

import React,{ Component, createRef }from'react'exportdefaultclassAppextendsComponent{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'exportdefaultfunctionApp(){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>)}

以上就是实现代码，下一篇将在此基础上实现移除子元素。