Question

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

为此，请尝试以下操作：

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

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

    document.body.appendChild(script);
}

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

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

关于如何完成此操作的任何想法，还是只需要分别在每个JS文件中添加，以及react组件本身中的html位？

Answer 1

您可以将您的react应用程序包含在较早的html中，而您只需要在需要的位置调用ReactDOM.render

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

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

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

Answer 2

如果要使用外部脚本，则不能使用.html扩展名。但是，您可以将.js文件与页面的javascript一起使用：

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

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

    document.body.appendChild(script);
}

您将可以在任意数量的页面上使用此js文件。

意外令牌“ <”来自 <!doctype html> .html页面

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

2 个答案: