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

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

类组件实现代码

javascript 复制代码
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>
    )
  }
}

函数组件实现代码

javascript 复制代码
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>
  )
}

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

相关推荐
牧羊狼的狼41 分钟前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手2 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
luckys.one2 小时前
第9篇:Freqtrade量化交易之config.json 基础入门与初始化
javascript·数据库·python·mysql·算法·json·区块链
魔云连洲2 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell3 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
weixin_437830944 小时前
使用冰狐智能辅助实现图形列表自动点击:OCR与HID技术详解
开发语言·javascript·ocr
超级无敌攻城狮4 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel5 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
gnip5 小时前
JavaScript事件流
前端·javascript
小菜全6 小时前
基于若依框架Vue+TS导出PDF文件的方法
javascript·vue.js·前端框架·json