首页 > 其他 > 详细

document.body.removeChild 获取到 symbol 标签

时间:2021-07-28 18:19:32      阅读:6      评论:0      收藏:0      [点我收藏+]

在做全局loading时,出现的问题,使用 antd-mobile 中 Icon 组件,导致 loading组件无法关闭的问题,

 

loading.jsx

import React from ‘react‘;
import ReactDOM from ‘react-dom‘;
import { Icon } from ‘antd-mobile‘;
import ‘./style.less‘;

class Loading {
  static animating = false
  open () {
    Loading.animating = document.getElementById(‘loading‘)
    if (Loading.animating) return;
    const dom = document.createElement(‘div‘)
    dom.setAttribute(‘id‘, ‘loading‘)
    document.body.appendChild(dom)
    ReactDOM.render(
      <div className=‘load‘ id=‘load‘>
        <Icon type=‘loading‘ />
      </div>, dom
    )
  }
  close () {
    console.log(document.getElementById(‘loading‘))
    document.body.removeChild(document.getElementById(‘loading‘))
  }
}

export default new Loading();

 

调用顺序

Loading.open()

setTimeout(() => {

 Loading.close()

}, 1000);

打印出的信息

技术分享图片

 

 

 

出现 问题:

Loading.close() 方法执行时,无法清除元素,即  document.body.removeChild(document.getElementById(‘loading‘))  方法无效
 
 
 
解决
由 Icon 组件 改为  ActivityIndicator 组件, console.log(document.getElementById(‘loading‘));  即可获得到 正常 的 div元素,即 可通过removeChild  清除
import React from ‘react‘;
import ReactDOM from ‘react-dom‘;
import { ActivityIndicator } from ‘antd-mobile‘;
import ‘./style.less‘;

class Loading {
  static animating = false
  open () {
    Loading.animating = document.getElementById(‘loading‘)
    if (Loading.animating) return;
    const dom = document.createElement(‘div‘)
    dom.setAttribute(‘id‘, ‘loading‘)
    document.body.appendChild(dom)
    ReactDOM.render(
      <div className=‘load‘ id=‘load‘>
        <ActivityIndicator size="large" />
      </div>, dom
    )
  }
  close () {
    document.body.removeChild(document.getElementById(‘loading‘))
  }
}

export default new Loading();

 

原因
Icon 组件实际为一个 SVG 标签,所以会获取到 symbol 标签

document.body.removeChild 获取到 symbol 标签

原文:https://www.cnblogs.com/-roc/p/15070385.html

(0)
(0)
   
举报
评论 一句话评论(0
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!