Question

我有一个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';
  }

Answer 1

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

Answer 2

可以在HTML中添加<script>标签。但是，建议不要将用于操作DOM的JavaScript代码与React一起使用。模态或弹出窗口也可以通过反应状态轻松处理。您还可以找到几个库。例如https://www.npmjs.com/package/react-modal

Answer 3

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

export function foo(){
 //some code here}

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

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

import {foo} from "./temp";

在这里，您已经导入了文件

现在如何使用它，因为它是函数

因此称其为foo()

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

3 个答案: