React在body下追加全局组件并实现渲染更新

 使用 ReactDOM.createPortal，类似于vue的Teleport

 

 

 

import React from 'react'
import ReactDOM from 'react-dom'
import { Spin } from 'antd'
import { connect } from 'react-redux'

function Loading(props) {
  const { isLoading, isLazyLoading } = props
  return ReactDOM.createPortal(
    <div
      className={'m-loading ' + (isLoading || isLazyLoading ? 'active' : '')}
    >
      <Spin className="m-spin" />
    </div>,
    document.body
  )
}

const mapStateToProps = (state) => {
  return {
    isLoading: state.getIn(['light', 'isLoading']),
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    onSetState(key, value) {
      dispatch({ type: 'SET_LIGHT_STATE', key, value })
    },
    onDispatch(action) {
      dispatch(action)
    },
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Loading)

 参考链接：https://zh-hans.reactjs.org/docs/portals.html#gatsby-focus-wrapper

https://v3.cn.vuejs.org/guide/teleport.html#teleport