将 React 应用构建添加到我现有的网站 div

Question

是否可以将 React 应用程序的构建 index.html 添加到我的 HTML/ColdFusion 网站中的 div？

我使用钩子在 React 中构建了一个聊天机器人。波纹管是我的 App.js，它导入了我的 ChatBot.js 组件。

import './App.css';
import MyChatBot from './ChatBot';

function App() {
  return (
    <div className="App">
      <MyChatBot/>
    </div>
  );
}

export default App;

正在运行。我有一个 ColdFusion/HTML 网站，我想在其中包含此“聊天机器人”或从 npm run build 生成的 index.html 到 div

<!-- ColdFusion Website here --->
<div id="myChatBot"></div>

想法是在 div 中包含 React 应用程序。可能吗？

谢谢。

Answer 1

希望对您有所帮助：https://reactjs.org/docs/add-react-to-a-website.html

要点是您已导入 React 脚本并将其呈现给该 ID：

const domContainer = document.getElementById('myChatBot');
ReactDOM.render(e(LikeButton), domContainer);

Answer 2

是的，你可以。您只需要将元素（您想要安装反应应用程序的位置）传递给 ReactDOM.render 方法。然后使用捆绑器捆绑您的 React 应用程序，比如 webpack，并通过脚本标签或通过应用程序的当前构建过程包含该捆绑包 html.

HTML

<!-- Website Markup --->
<div id="myChatBot"></div>

<!-- Include React bundle --->
<script src="bundle.js"></script>

反应

import ReactDOM from "react"
import App from "./App"

ReactDOM.render(<App/>, document.getElementById("myChatBot"))

将 React 应用构建添加到我现有的网站 div

Add React app build to my existing website div

coldfusion

reactjs