问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
user_tYDk6iCh
    11846489

    本地有几个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文件的变量函数啥的都关联高但是很分散

    ant-design-proreact
    阅读 3.3k
    1 个回答
    得票最新
    头像
    乔治
      13.1k1429
      ✓ 已被采纳
      // 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;
  }
}
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题