如何使外部 javascript 文件在 ReactJs 中工作？

Question

在 React 项目中，我的 public.html 文件如下所示：

<head>
    <link rel="stylesheet" href="some_stylesheet_file.css">
</head>
<body>
    <div id="root"></div>

    <script src="function.js"></script>
</body>

项目的所有组件都加载到“根”div 中。 “function.js”文件是来自主题的外部 javascript 文件。

在其中一个 React 组件中，我有一个输入字段：

<input type="text" name="userName" id="userName" />

现在，在那个组件的“componentDidMount()”里面，如果我写

console.log(document.getElementByID("userName"))

它在控制台中正确显示“用户名”字段。 但是如果我在“function.js”文件中做同样的事情，output是null，这表明外部javascript文件不能正常工作。 我不确定如何使外部 javascript 文件工作，以便我可以使用主题的属性。 任何人都可以帮忙吗？

Answer 1

我们在 ReactJS 应用程序中使用 DOM 方法加载外部 JS。

例如https://api.mesibo.com/mesibo.js是 mesibo 提供的外部 JS 库，我们加载如下

const externalJS = "https://api.mesibo.com/mesibo.js";
const script = document.createElement("script");
script.src = externalJS;
document.body.appendChild(script);

如何使外部 javascript 文件在 ReactJs 中工作？

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-03-27 03:02:49

如何使外部 javascript 文件在 ReactJs 中工作？

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-03-27 03:02:49

解决方案1
1 已采纳 2021-03-27 03:02:49