loading 不生效

来源：6-7 Loading组件封装-方案一

sssnnnn

2023-05-23

src/util/loading/index.tsx

// 不生效
export const showLoading = () => {
  const loading = document.createElement('div')
  loading.setAttribute('id', 'loading')
  ReactDom.createRoot(loading).render(<Loading />)
}

这样写是可以的 (已经在 index.html 中加上 <div id="loading"></div>的前提下)

export const showLoading = () => {
  const loading = document.getElementById('loading') as HTMLDivElement
  ReactDom.createRoot(loading).render(<Loading />)
}

这是我的代码仓库
https://gitee.com/pyq19/imooc-react-manager

commit 是 f429de2bacf420d3c5a5a5b8216d2985db3b7b6c

希望老师能帮看下, 感谢!

写回答

1回答

河畔一角

2023-05-23

创建完div以后，需要append到body上面才可以，你缺了这一句代码。

document.body.append(loading)

河畔一角

雲飛向天

课程是在index.html提前定义了一个

元素，所以课程的方式是： export const showLoading = () => { if (count === 0) { const loading = document.getElementById('loading') loading?.style.setProperty('display', 'flex') } count++ }，直接获取该元素进行渲染的，而提问者上面的写法是通过document.createElement创建了一个新元素，所以，才需要使用append追加到body的。因为提问者没有按照课程讲的写法去做。

2023-12-20

共4条回复

React18+TS 通用后台管理系统解决方案落地实战

全面提升React高阶技能，灵活驾驭各类后台管理系统开发痛点

624 学习 · 226 问题

查看课程

相似问题

急急急 Loading效果

回答 3

loading不生效

回答 2

prettier无法生效

回答 2

延迟生成loading

回答 1

通过参数判断是否开启请求响应拦截器中的loading

回答 1

打开慕课网App查看更多内容