为什么ReactDOM.render()呈现任何东西，而ReactDOM.createRoot().render()没有呈现任何东西？
为什么ReactDOM.render()呈现任何东西，而ReactDOM.createRoot().render()没有呈现任何东西？
提问于 2022-05-17 07:10:41
我试图在React中使用JSX，但是ReactDOM.createRoot().render()不会呈现任何内容：
import React from 'react'
import ReactDOM from 'react-dom'
ReactDOM.createRoot(root).render(<h1>Hello world</h1>)但是，当我使用ReactDOM.render时，它起作用了：
import React from 'react'
import ReactDOM from 'react-dom'
ReactDOM.render(<h1>Hello world</h1>, root)这不是我的问题，但我更感兴趣的是为什么会这样。
注意:我使用的是Reactiv17.0.2，root指的是<div id="root"></div>。
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-05-17 07:17:41
ReactDOM.createRoot直到v18才被添加。如果您查看devtools控制台，您应该会看到以下错误：
TypeError: ReactDOM.createRoot不是一个函数
下面是一个显示错误的v17示例：
const root = document.getElementById("root");
ReactDOM.createRoot(root).render(<h1>Hello world</h1>);<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
和一个使用v18的createRoot示例。
const root = document.getElementById("root");
ReactDOM.createRoot(root).render(<h1>Hello world</h1>);<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>
对于v17，使用ReactDOM.render。(或者升级到v18并使用createRoot。)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72269585
复制相关文章
相似问题
腾讯云开发者
