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

我有一个反应组件 (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';

  }


米脂
浏览 287回答 2
2回答

郎朗坤

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

精慕HU

假设您的外部 JS 文件 Temp.js包含以下代码或函数。export function foo(){ //some code here}为了满足当前情况,您将该文件移动|复制到您的组件所在的同一文件夹现在只需将其添加到您的组件中import {foo} from "./temp";在这里你已经导入了文件现在如何使用它,因为它是功能所以简单地称之为 foo()
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript