时间戳

首页 > 解决方案 > 我可以将旧版 html/js 脚本添加到 React 中吗

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

问题描述

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

为此，尝试了以下方法：

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

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

    document.body.appendChild(script);
}

这会出错并显示以下消息：“语法错误：意外令牌 <”。（< 是 .html 文件中使用的第一个字符）

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

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

标签： javascripthtmlreactjs

解决方案

您可以将您的反应应用程序包含在您的旧 html 中，您只需调用ReactDOM.render您希望应用程序所在的任何位置

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

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

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

推荐阅读