从react typescript组件调用外部Javascript函数

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了从react typescript组件调用外部Javascript函数相关的知识,希望对你有一定的参考价值。

我有一个带有打字稿的react redux应用程序。所以场景是这样的,我有一个index.cshtml文件,其中包含一些javascript

<script type="text/javascript">
    function test() {
        alert('Function from index.html');
    }
</script>

现在在我的react组件上,在componentWillMount()函数的Main.tsx上,我想调用test函数。

componentWillMount() {
    window.test();
}

但这不适合我。消息是类型窗口上不存在测试

任何帮助是极大的赞赏。

答案

您可以像这样扩展Window界面:

interface Window {
    test(): void;
}

当您在模块中执行此操作时,您需要确保它是您正在扩展的全局Window接口:

declare global {
    interface Window {
        test(): void;
    }
}

这为编译器提供了类型实现。

另一答案

我建议在这里使用一些Utility类。据我所知,您需要一些可以在其他组件中使用的功能。因此,最好的方法是使用静态方法创建Util类。或者像这样的模块:

export default {
  test() {
    console.log('foo'); 
  }, ...

};

另一答案

如果您确定自己拥有全局变量。您可以在键入文件夹中键入自定义文件。

interface Window {
    test: () => void
}

如果你使用eslint,你还应该将test设置为globals配置选项。

以上是关于从react typescript组件调用外部Javascript函数的主要内容,如果未能解决你的问题,请参考以下文章

使用 TypeScript 在 React 组件外部调度 Redux Thunk 操作

React set Hook 从组件外部的函数调用

一种从外部调用 React 组件方法的方法(使用它的状态和道具)

React Typescript NPM 包中的外部 CSS

我想在辅助函数中操作 React 类组件中存在的状态。我想在 Typescript 中实现相同的目标

React - useRef 与 TypeScript 和功能组件