В реакции 18, как мне использовать createRoot для рендеринга компонента класса?

Я пытаюсь преобразовать свое приложение в метод рендеринга React 18.

У меня есть компонент класса, который не отображается в элемент root. Как получить элемент createRoot для рендеринга компонента и куда его поместить

const root = ReactDOM.createRoot(document.getElementById("myrenderelement")); 
// please notice I'm not rendering to root as I said above   ^^^

Это выходит за рамки определения класса, в состоянии... где? Если я помещу его вне класса, я получаю эту ошибку:

Syntax error: Unexpected token (80:6)

  78 |  
  79 |
> 80 |  root.render() {
     |      ^
  81 |      return (
  82 |          <div className = "myclass">
  83 |              <div className = "container">

То же самое для

root = ReactDOM.createRoot(document.getElementById("myrenderelement"));
root.render() {

И к

ReactDOM.createRoot(document.getElementById("myrenderelement")).render() {

Я всегда говорю "Неожиданный токен" в этой строке

Если я попытаюсь:

class MyClass extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            <my state vars>
            root: ReactDOM.createRoot(document.getElementById("myrenderelement"))
        }
    }
    ....

Затем

this.state.root.render() { <whatever>

Я снова получаю неожиданный токен в строке рендеринга:/

Как визуализировать компонент класса?

javascript reactjs react-18

19.11.2022 12:22

[JS за 1 час] - 9. Асинхронный

JavaScript является однопоточным, то есть он может обрабатывать только одну задачу за раз. Для обработки длительных задач, таких как сетевые запросы,...

Подъем в javascript

Hoisting - это поведение в JavaScript, при котором переменные и объявления функций автоматически "перемещаются" в верхнюю часть соответствующих...

Как использовать API парсинга квитанций с помощью JavaScript за 5 минут?

В этом руководстве вы узнаете, как использовать API парсинга квитанций за 5 минут с помощью JavaScript. Eden AI предоставляет простой и удобный для...

Хук useOnClickOutside в ReactJS

Как разработчик ReactJS, вы, возможно, сталкивались с ситуацией, когда вам нужно закрыть модальное или выпадающее меню, когда кто-то щелкает за его...

Хуки (часть-2) - useEffect

Хук useEffect - один из самых мощных и универсальных инструментов в арсенале разработчика React. Он позволяет вам управлять побочными эффектами в...

Простое руководство по тестированию взаимодействия с пользователем с помощью библиотеки тестирования React

В предыдущем посте я показал вам на примерах, как писать базовые тесты в React. Важнейшей частью пользовательского интерфейса приложений является...

193

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Для root.render не имеет значения, является ли ваш компонент class компонентом или функциональным компонентом. В любом случае вы передаете элемент React для рендеринга (обычно создаете элемент через JSX), как показано на странице, на которую ссылается версия React v18 для разработчиков, если вы используете старый способ:

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Example />);

class Child extends React.Component {
    render() {
        return <div>Child Component</div>;
    }
}

class Example extends React.Component {
    render() {
        return (
            <div>
                Top-Level Component
                <Child />
            </div>
        );
    }
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Example />);

<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>

Вы используете это только для корня вашего приложения, верхнего уровня. Не в элементах, отображаемых этим элементом верхнего уровня.

Что я делал неправильно, так это то, что я подменял метод рендеринга и во внутренних компонентах, а не только в корне. Как только я удалил код оттуда, он заработал. Спасибо. :)

— 19.11.2022 12:43

19.11.2022 12:26