loading 不生效

Question

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

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

Answer 1

河畔一角 2023-05-23 21:36:00

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

document.body.append(loading)

• 提问者 sssnnnn #1

  改成
  
  ```js
  export const showLoading = () => {
    if (count === 0) {
      const loading = document.createElement('div')
      document.body.append(loading)
      loading.setAttribute('id', 'loading')
      ReactDom.createRoot(loading).render(<Loading />)
    }
    count++
  }
  ```
  
  这样后就可以了, 谢谢老师

• 河畔一角 回复 提问者 sssnnnn #2

  不客气

• 雲飛向天 #3

  在视频里我看到你的代码好像没有append, 为什么是可以的? 你的好像正常渲染出来了

点开查看后面1条评论