antd pro V5如何引入第三方js脚本？

作者站长头像
站长
· 阅读数 26

本地有几个js文件需要在页面中引入使用，在普通的js项目中可以直接在html的script标签使用，函数都可以正常调用，例子如下：

index.html

<head>
<script type="text/javascript" src=".myscript/sdk.min.js"></script>
<script type="text/javascript" src=".myscript/myFun.js"></script>
<script type="text/javascript">
    function handle() {
    // 使用myFun.js文件中的函数myFunc1
       myFunc1("getData", {....}).......
    }
</script>
</head>

<body>
  <main>
    <div onclick="handle()">操作</div>
  </main>
</body>

但是antd pro V5版本没有document.ejs，scripts的引入实在config.ts中配置headScripts，我将这几个文件都放到了public/js目录下，然后引入：config.ts

  headScripts: [
    {src: '/js/sdk.min.js'},
    {src: '/js/myFun.js'},
  ],

test.tsx

const Test = () => {
    function handle() {
        // error:Cannot find name 'myFunc1'
        myFunc1("getData", {....}).......
    }
    return <div onClick={handle}>操作</div>
}

export default Test

可是这样无法在tsx页面中使用，函数全部报错Cannot find name。这几个文件是别人提供的文件，函数变量等全部没有导出，我现在如何处理才能在tsx页面中正常使用呢，难道我只能重新改写文件全部用export导出然后页面中导入使用吗，这样要改的东西很多，几个js文件的变量函数啥的都关联高但是很分散

回复
1个回答
avatar
test
2024-07-03
// config.ts
export default defineConfig({
  // ...
  headScripts: [
    { src: '/js/sdk.min.js' },
    { src: '/js/myFun.js' },
  ],
  // ...
});

// Test.tsx
const Test = () => {
  function handle() {
    // 使用window对象访问全局函数
    if (window.myFunc1) {
      window.myFunc1("getData", { /*...*/ });
    }
  }

  return <div onClick={handle}>操作</div>
}

export default Test;

你可以在你的.tsx文件：

declare global {
  interface Window {
    myFunc1: (arg1: string, arg2: any) => void;
  }
}
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容