Почему ReactDOM.render() отображает что-либо, а ReactDOM.createRoot().render() — нет?
Я пытаюсь использовать JSX в React, но 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)
Не то чтобы у меня были проблемы с этим, но меня больше интересует, почему это так.
Примечание. Я использую React v17.0.2, а root относится к <div id="root"></div>.
Вы получаете какие-либо ошибки?
А что такое root в вашем коде?
@T.J.Crowder <div id="root"></div>
Во избежание сомнений: если предположить, что root относится к элементу DOM, ваш первый блок кода верен для React v18+, но не будет работать в React v17 или более ранних версиях.
@mohammedabergsson581 - Я настоятельно призываю вас, нет, полагаться на автоматические глобальные переменные DOM. Вместо этого найдите элемент, используя document.getElementById. (Но автоматический глобальный DOM здесь не проблема, если этот ReactDOM.render код работает.)
@NidhinJoseph 17.0.2
@mohammedabergsson581 - Вот в чем проблема. createRoot не добавлялся до v18. Если вы посмотрите в консоли devtools, вы должны увидеть ошибку TypeError: ReactDOM.createRoot is not a function.
@T.J.Crowder Вау, я никогда не проверяю версии
@mohammedabergsson581 - Другие люди обязательно совершат ту же ошибку, поэтому полезно иметь это здесь. :-) (Я искал чистую предыдущую версию этого и не смог найти.)
@mohammedabergsson581 — Вы спросили, какие проблемы могут возникнуть с автоматическими глобальными переменными DOM. Глобальное пространство имен переполнено очень, и легко может возникнуть конфликт. root (на данный момент) — это нормально, но если вы попытаетесь использовать глобальный автоматический DOM с такими идентификаторами, как name, close, event или любым другим, произойдет сбой с кажущейся странной ошибкой. Напротив, с этими идентификаторами все в порядке, если вы ищете элемент с помощью document.getElementById. Есть также отдельная проблема, заключающаяся в том, что он добавляет ясности коду, тогда как без него идентификатор появляется из ниоткуда для людей, читающих код. :-)
@T.J.Crowder Спасибо за решение моей проблемы, теперь я обновился до 18.1.0, и теперь все работает нормально. Я никогда не знал, что автоматические глобальные DOM могут делать что-то подобное. Сейчас я просто буду придерживаться document.getElementById()
Ответы 1
ReactDOM.createRoot не добавлялся до v18. Если вы посмотрите в консоли devtools, вы должны увидеть эту ошибку:
TypeError: ReactDOM.createRoot is not a function
Вот пример 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>Для версии 17 используйте ReactDOM.render. (Или обновитесь до версии 18 и используйте createRoot.)
какую версию реакции вы используете?