在按钮单击时将 React 组件渲染到现有非 spa 站点中的 div答案

【问题标题】：Render React component into div in existing non-spa site on button click在按钮单击时将 React 组件渲染到现有非 spa 站点中的 div
【发布时间】：2019-07-11 22:04:21
【问题描述】：

我有一个不是水疗中心的网站。在单击按钮时，会在 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 的按钮单击代码中添加什么代码，以便渲染组件？

ps。实际上功能有点复杂，因为我们正在抓取用户指定的页面并通过 srcdoc 属性在 iframe 中显示 html。抓取的 html 添加了 div，然后我们在 div 中渲染一个小部件，以便用户可以预览我们的小部件在他们的页面上的外观。

【问题讨论】：

标签： reactjs react-component

【解决方案1】：

你必须使用 ReactDOM 来渲染组件。在你的项目中安装和导入 react-dom 以便 webpack 为你打包它。您可能需要在 web pack 配置中将 ReactDOM 公开为全局。下面是一个简单的代码sn-p：

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

参考 https://reactjs.org/docs/react-dom.html

【讨论】：

如何让 reactdom 全球化？站点的其余部分已经存在，没有使用 react，并且 JavaScript 没有 webpacked。而且我可能无法将 reactdom.render 与 react 组件放在同一个文件中，因为它应该渲染的文档在加载时不可用