Вызвать внешнюю функцию Javascript из реагирующих компонентов машинописи

Question

У меня есть приложение реагировать на редукцию с машинопись.Итак, сценарий такой: у меня есть файл index.cshtml, который включает в себя некоторый JavaScript.

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

Теперь на моем реагирующем компоненте в Main.tsx в функции componentWillMount () я хочу вызвать тестовую функцию.

componentWillMount() {
    window.test();
}

, но это не работает для меня.Сообщение test не существует в окне типа

Любая помощь приветствуется.

Answer 1

Предлагаю использовать здесь некоторый класс Utility.Как я понимаю, вам нужны некоторые функции, которые вы можете использовать в других компонентах.Итак, лучший способ сделать это - создать класс Util с помощью статических методов.или некоторый модуль, подобный этому:

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

};

Answer 2

Если вы уверены, что у вас есть глобальная переменная.Вы можете ввести свой файл самоопределения в папку для ввода.

interface Window {
    test: () => void
}

, если вы используете eslint, вам также следует установить test на globals опция конфигурации.

Answer 3

Вы можете расширить интерфейс Window следующим образом:

interface Window {
    test(): void;
}

Когда вы делаете это в модуле, вы должны убедиться, что это глобальный интерфейс Window, который вы расширяете:

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

Это обеспечивает реализацию типа для компилятора.