Почему 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>.

какую версию реакции вы используете?

Nidhin Joseph 17.05.2022 09:11

Вы получаете какие-либо ошибки?

evolutionxbox 17.05.2022 09:12

А что такое root в вашем коде?

T.J. Crowder 17.05.2022 09:12

@T.J.Crowder <div id="root"></div>

mohammedabergsson581 17.05.2022 09:13

Во избежание сомнений: если предположить, что root относится к элементу DOM, ваш первый блок кода верен для React v18+, но не будет работать в React v17 или более ранних версиях.

T.J. Crowder 17.05.2022 09:14

@mohammedabergsson581 - Я настоятельно призываю вас, нет, полагаться на автоматические глобальные переменные DOM. Вместо этого найдите элемент, используя document.getElementById. (Но автоматический глобальный DOM здесь не проблема, если этот ReactDOM.render код работает.)

T.J. Crowder 17.05.2022 09:14

@NidhinJoseph 17.0.2

mohammedabergsson581 17.05.2022 09:14

@mohammedabergsson581 - Вот в чем проблема. createRoot не добавлялся до v18. Если вы посмотрите в консоли devtools, вы должны увидеть ошибку TypeError: ReactDOM.createRoot is not a function.

T.J. Crowder 17.05.2022 09:15

@T.J.Crowder Вау, я никогда не проверяю версии

mohammedabergsson581 17.05.2022 09:17

@mohammedabergsson581 - Другие люди обязательно совершат ту же ошибку, поэтому полезно иметь это здесь. :-) (Я искал чистую предыдущую версию этого и не смог найти.)

T.J. Crowder 17.05.2022 09:24

@mohammedabergsson581 — Вы спросили, какие проблемы могут возникнуть с автоматическими глобальными переменными DOM. Глобальное пространство имен переполнено очень, и легко может возникнуть конфликт. root (на данный момент) — это нормально, но если вы попытаетесь использовать глобальный автоматический DOM с такими идентификаторами, как name, close, event или любым другим, произойдет сбой с кажущейся странной ошибкой. Напротив, с этими идентификаторами все в порядке, если вы ищете элемент с помощью document.getElementById. Есть также отдельная проблема, заключающаяся в том, что он добавляет ясности коду, тогда как без него идентификатор появляется из ниоткуда для людей, читающих код. :-)

T.J. Crowder 17.05.2022 09:31

@T.J.Crowder Спасибо за решение моей проблемы, теперь я обновился до 18.1.0, и теперь все работает нормально. Я никогда не знал, что автоматические глобальные DOM могут делать что-то подобное. Сейчас я просто буду придерживаться document.getElementById()

mohammedabergsson581 17.05.2022 09:40
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
0
12
31
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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.)

Другие вопросы по теме