如何将外部 javascript 文件添加到 React 组件中

Question

我有一个反应组件 (jsx)，它显示一个论坛和一些图像，我还有一个显示弹出窗口或模式的按钮，但这个弹出窗口是用 JavaScript 在外部文件中编程的。我想将此代码加载到我的组件中。我使用了脚本标签，但没有用。有任何想法吗 ？这是我的外部 JavaScript 文件：let popup = document.getElementById('popup');let modalContainer = document.getElementById('modal-container');let buttonTarget = document.getElementById('button-target');let cross = document.getElementById('cross');buttonTarget.addEventListener('click', openModal);cross.addEventListener('click', closeModal);   function openModal() {    popup.style.display = 'block';    modalContainer.style.display = 'block';  }  function closeModal() {    popup.style.display = 'none';    modalContainer.style.display = 'none';  }

Answer 1

React 也是 Javascript（jsx 是编写 javascript 代码的另一种方式/语法，然后将其转换为 javascript），因此您可以在其中使用任何 javascript 文件。为了做到这一点，首先检查 javascript 文件是否导出了您想要在您的 react 组件中使用的内容，然后检查您是否将其导入到包含 react 组件的文件中。

Answer 2

假设您的外部 JS 文件 Temp.js包含以下代码或函数。

export function foo(){

 //some code here}

为了满足当前情况，您将该文件移动|复制到您的组件所在的同一文件夹

现在只需将其添加到您的组件中

import {foo} from "./temp";

在这里你已经导入了文件

现在如何使用它，因为它是功能

所以简单地称之为 foo()