document.body.removeChild 获取到 symbol 标签

在做全局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 () {

　　　　const ld = document.getElementById('loading')

    　　if (ld) {

      　　document.body.removeChild(ld)

    　　}

  }
}

export default new Loading();

 

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