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
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步