我可以将旧版 html/js 脚本添加到 React 中吗答案

【问题标题】：Can I add legacy html/js script into React我可以将旧版 html/js 脚本添加到 React 中吗
【发布时间】：2019-02-25 18:19:56
【问题描述】：

我是前端开发的新手，我有一个 react 应用程序，想添加一些以前创建的旧 html 代码。（此 html 代码引用了多个 .js 文件）。我需要对我的反应数据做几件事，然后当我这样做时，用户可以选择应该触发现有 html 功能的部分结果。

为此尝试了以下操作：

componentDidMount () {
    const script = document.createElement("script");

    script.src = "/address/of/file.html";
    script.async = true;

    document.body.appendChild(script);
}

此错误并显示以下消息：“语法错误：意外令牌。（

我也尝试过重构代码本身，但它有数千行。

关于如何做到这一点的任何想法，还是我只需要分别添加每个 JS 文件，并在反应组件本身中做 html 位？

【问题讨论】：

您正在创建一个脚本标签并将 html 放入其中。这真的是你想要的吗？
@Tholle html 文件包含几个 .js 文件并进行处理，但既然您提到它，也许我应该单独导入这些 .js 文件并自己从 html 文件中做这些事情？我知道上面提到的做法只是运行文件，所以不确定如何将它们全部分开

标签： javascript html reactjs

【解决方案1】：

您可以将您的 React 应用程序包含在您的旧 html 中，您只需调用ReactDOM.render 任何您想要您的应用程序的位置

<body>
  <!-- older html code -->
  <div id='appRoot'></div>
</body>

ReactDOM.render(<App />, document.getElementById('appRoot'));

确保您的旧代码（尤其是 js）不会干扰 React，即 DOM 不会操纵您的 #appRoot 中的任何内容

【讨论】：

【解决方案2】：

如果您想使用外部脚本，则不能使用 .html 扩展名。但是，您可以使用包含页面 javascript 的 .js 文件：

componentDidMount () {
    const script = document.createElement("script");

    script.src = "/address/of/file.js";
    script.async = true;

    document.body.appendChild(script);
}

而且您可以在任意数量的页面上使用这个 js 文件。

意外的标记“<!doctype html> 您的 .html 页面

【讨论】：