如何将我的聊天机器人组件转换为 <script> 标签，以便任何人都可以在其网站中使用该 <script>，在 React.js 中？

Question

我的 Next.js 应用程序中有一个正在运行的聊天机器人组件。

现在我要创建一个功能，任何人都可以使用此组件的标签在自己的网站中使用此组件（集成它）。

我尝试将 ChatbotComponent 放入 Bot.js 文件中，并尝试像这样渲染它：

function ChatbotComponent() {
  return (
    // Your chatbot component JSX goes here
    <div>
      <h1>Chatbot Content</h1>
      {/* Additional chatbot UI */}
    </div>
  );
}

function renderChatbot() {
  const container = document.createElement('div');
  document.body.appendChild(container);

  ReactDOM.render(<ChatbotComponent />, container);
}

renderChatbot()

之后我创建了一个新项目并使用此文件作为：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="http://localhost:3000/Bot.js" defer></script>
  </head>
  <body></body>
</html>

但它显示这样的错误

我认为这是因为 React 文件没有转换成浏览器可读的 JavaScript 代码。

请告诉我我做错了什么以及如何实现此功能。

Answer 1

你做的一切都是正确的

但是您可以

localhost

构建文件

，而不是渲染

run

url

像这样修改你的
```
package.json
```

"build": "react-scripts build && mv build/static/js/main*.js build/static/js/main.chatbotfile.js",

运行
```
npm run build
```
和
将此代码附加到您想要的任何文件（例如。
```
html boiler file
```
）

<script
  id="crmone-chatbot"
  chatbotId=""
  src="build/static/js/main.chatbotfile.js"
></script>

（如果有的话也附上任何CSS文件）

注意：您可以切换

index.js

，就像您想在

local

中运行聊天机器人一样，或者想要

build

运行

script tag

，如下所示

function renderChatbot() {
  const container = document.createElement("div");
  container.style.position = "relative";
  container.style.height = "calc(100% - 16px)";
  container.style.width = "100%";
  container.style.zIndex = "9999";

  document.body.appendChild(container);

  ReactDOM.createRoot(container).render(<App />);
}

if (runInLocal || false)
  ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
else renderChatbot();

如何将我的聊天机器人组件转换为 <script> 标签，以便任何人都可以在其网站中使用该 <script>，在 React.js 中？

问题描述投票：0回答：1

1个回答

最新问题

如何将我的聊天机器人组件转换为 <script> 标签，以便任何人都可以在其网站中使用该 <script>，在 React.js 中？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1