react中判断某元素内是否含有子元素,有则将所有子元素移除,无则添加一个类名为append_class的div元素

接上一篇内容继续实现功能:含有子元素则移除,不含有则添加一个类名为append_class的div元素。

类组件实现代码

javascript 复制代码
import React, { Component, createRef } from 'react'

export default class App extends Component {
  constructor(props){
    super(props)
    this.divRef = createRef()
  }

  componentDidMount(){
    const element = this.divRef.current
    if (element) {
      if (element.hasChildNodes()) {
        console.log('该元素含有子元素');
        const childNodes = element.childNodes
        for (let i = childNodes.length - 1; i >= 0; i--) {
          element.removeChild(childNodes[i])
        }
      }else{
        console.log('该元素不含子元素');
        const appendChildEl = document.createElement('div')
        appendChildEl.className = "append_class"
        appendChildEl.innerText = "类组件新加入的元素"
        element.appendChild(appendChildEl)
      }
    }
  }

  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(() => {
    const element = divRef.current
    if (element) {
      if (element.hasChildNodes()) {
        console.log('该元素含有子元素')
        const childNodes = element.childNodes
        for (let i = childNodes.length - 1; i >= 0; i--) {
          element.removeChild(childNodes[i])
        }
      } else {
        console.log('该元素不含子元素')
        const appendChildEl = document.createElement('div')
        appendChildEl.className = "append_class"
        appendChildEl.innerText = "函数组件新加入的元素"
        element.appendChild(appendChildEl)
      }
    }
  })

  return (
    <div>
      <div ref={divRef}>
        <button>检查子元素</button>
      </div>
    </div>
  )
}
相关推荐
王景程9 分钟前
如何测试短信接口
java·服务器·前端
安冬的码畜日常32 分钟前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程
烛阴35 分钟前
Node.js中必备的中间件大全:提升性能、安全与开发效率的秘密武器
javascript·后端·express
小杨升级打怪中37 分钟前
前端面经-JS篇(三)--事件、性能优化、防抖与节流
前端·javascript·xss
清风细雨_林木木41 分钟前
Vue开发网站会有“#”原因是前端路由使用了 Hash 模式
前端·vue.js·哈希算法
鸿蒙布道师1 小时前
OpenAI为何觊觎Chrome?AI时代浏览器争夺战背后的深层逻辑
前端·人工智能·chrome·深度学习·opencv·自然语言处理·chatgpt
袈裟和尚1 小时前
如何在安卓平板上下载安装Google Chrome【轻松安装】
前端·chrome·电脑
曹牧1 小时前
HTML字符实体和转义字符串
前端·html
小希爸爸1 小时前
2、中医基础入门和养生
前端·后端
局外人LZ1 小时前
前端项目搭建集锦:vite、vue、react、antd、vant、ts、sass、eslint、prettier、浏览器扩展,开箱即用,附带项目搭建教程
前端·vue.js·react.js