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

Question

У меня есть сайт, который не спа. В один момент, когда нажата кнопка, в 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, чтобы пользователь мог просмотреть, как будет выглядеть наш виджет на их странице.

Answer 1

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

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

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