Рендеринг компонента React в div на существующем сайте, отличном от спа, при нажатии кнопки

У меня есть сайт, который не является спа. В какой-то момент, когда кнопка нажата, в dom создается div. После создания div я хочу отобразить компонент React в этот div. Мой компонент выглядит так

import React, { Component } from 'react';

class MyComponent extends Component {

constructor(props) {
    super(props);
    this.state = {
        date: null
    };
}

render() {
    return (
        <div>
            //Here will be more controls
        </div>
    );
}

}

Я запускаю webpack для этого файла, и на исходной странице я ссылаюсь на сгенерированный файл js.

Какой код я должен добавить к моему коду нажатия кнопки, который добавляет div, чтобы я мог отображать компонент?

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


reactjs react-component
person Mathias Rönnlund    schedule 11.07.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы должны использовать ReactDOM для рендеринга компонента. Установите и импортируйте react-dom в свой проект, чтобы webpack связал его для вас. Возможно, вам потребуется сделать ReactDOM глобальным в конфигурации вашего веб-пакета. Ниже приведен простой фрагмент кода:

ReactDOM.render(
    <MyComponent/> ,
    document.getElementById(id) // id of element in your case div created
  );

Ссылка https://reactjs.org/docs/react-dom.html

person sydeng    schedule 12.07.2019
comment
Как сделать reactdom глобальным? Остальная часть сайта уже существует, не использует реакцию, и JavaScript для этого не упакован. И я, вероятно, не могу поместить reactdom.render в тот же файл, что и компонент реакции, поскольку документ, в котором он должен отображаться, недоступен во время загрузки. - person Mathias Rönnlund; 12.07.2019