时间戳

首页 > 解决方案 > 在 App.js React 开发中导入外部 Js 时遇到问题

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

问题描述

作为学习的一部分，我正在尝试构建一个在 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'

我尝试在此处阅读有关导入 Externaljs 文件的这篇文章

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

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

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

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

标签： javascripthtmlcssreactjs

解决方案

您忘记从logic.js

export function generateString...

export function CopyIt...

这就是您将它们导入的方式App.js

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

推荐阅读