在 App.js React 开发中导入外部 Js 时遇到问题

Question

我正在尝试构建一个入门应用程序，它在 React 开发中匿名处理 SMTP 作为学习的一部分

但是在进入实际开发之前，我不是在这里寻找花哨的前端 所以我只写了基本的展示脚本来验证代码是否运行良好

听到我的 App.js 看起来喜欢 这是一个简单的脚本，它基本上生成随机关键字电子邮件并让您复制邮件地址，所以每次我刷新页面时它都会给我一封新邮件

import logo from './logo.svg';
import './App.css';

const characters ='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

function generateString(length) 
{
    let result = ' ';
    let addr = "@example.com";
    const charactersLength = characters.length;
    for ( let i = 0; i < length; i++ ) {
        result += characters.charAt(Math.floor(Math.random() * charactersLength));
    }
    result=result+addr;

    return result;
}

var mail=generateString(9)


function CopyIt() {
  
  var copyText = document.getElementById("evar");

  /* Select the text field */
  copyText.select();
  copyText.setSelectionRange(0, 99999);

  /* Copy the text inside the text field */
  document.execCommand("copy");

  /* Alert the copied text */
  alert("Copied the text: " + copyText.value);
}


function App() {
  return (
   <> 
   <pre>
   <h1>This is Temporarily mail site </h1>
   <p>It helps you Access your Anonymous mail without logins Required </p>
   </pre>
   <nav className="navbar navbar-light bg-light">
      <form className="container-fluid">
        <div class="input-group">
        <span class="input-group-text" id="basic-addon1">@</span>
        <input type="text" id="evar" class="form-control" value={mail} aria-label="Username" aria-describedby="basic-addon1"></input>
        <button onClick='Copyit()'>Copy text</button>
        </div>
      </form>
    </nav>

   </>
  );
}

export default App;

但是每次我刷新主 App.js 时，我都会收到以前生成的代码的复制邮件 所以我所做的是 放置一个新的 Js 文件名 logic.js 并放置我的两个函数 genrateStrings 和 CopyIt 并在 App.js 中导入

作为import './logic.js' 在具有相同 Src 文件夹的 App.js 中

现在我的 logic.js 看起来像

const characters ='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

function generateString(length) 
{
    let result = ' ';
    let addr = "@example.com";
    const charactersLength = characters.length;
    for ( let i = 0; i < length; i++ ) {
        result += characters.charAt(Math.floor(Math.random() * charactersLength));
    }
    result=result+addr;

    return result;
}


function CopyIt() {
  
  var copyText = document.getElementById("evar");

  /* Select the text field */
  copyText.select();
  copyText.setSelectionRange(0, 99999);

  /* Copy the text inside the text field */
  document.execCommand("copy");

  /* Alert the copied text */
  alert("Copied the text: " + copyText.value);
}

现在当我尝试运行代码时，我遇到了类似的错误 genrateStrings() 和 CopyIt() 未找到

我也尝试在 public/index.html 和 src/index.js 中更新 import './logic.js'

我尝试阅读这篇关于导入外部js文件here的文章

但我无法理解，因为我是 react 的初学者

我也尝试过使用这种导入方法

const Demo = props => (
  <ScriptTag type="text/javascript" src="logic.js" />
  )

但他们都没有给我提到的有希望的结果

Answer 1

您忘记从logic.js 导出函数

export function generateString...

export function CopyIt...

这就是你在App.js中导入它们的方式

import { generateString, CopyIt } from './logic.js';