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

Я не уверен, что это было задано раньше, или кто-то столкнулся с той же проблемой в реакции. Таким образом, сценарий подобен этому, у меня есть файл index.html, который включает в себя некоторый javascript. Теперь на моем реагирующем компоненте у меня есть условие, которое будет отображаться только в том случае, если условие истинно. Это означает, что первоначально, когда моя страница загружалась, компонент еще не был отображен. Когда я переключаю кнопку, это то, где этот компонент получает визуализированный. Этот дочерний компонент должен вызывать метод javascript, который был включен в мой index.html. Как мне это сделать?

Любая помощь очень ценится.

Ответы

Ответ 1

В index.html

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

В вашем компоненте

componentWillMount() {
  window.test();
}

Ответ 2

Таким образом, либо вы определяете метод в глобальной области (aka window). И тогда вы можете использовать его из любых методов, будучи реакцией или нет.

Или вы можете перейти к основанной на модуле парадигме и использовать require/import для получения модуля и использования функции.

Для больших проектов последний лучше, поскольку он масштабируется, а если вам нужна демонстрация или POC, вы можете, конечно же, подключить все к глобальному охвату, и это сработает.

Дополнительная информация о модулях находится по адресу: http://exploringjs.com/es6/ch_modules.html

Ответ 3

Попробуйте это решение для вызова глобальных функций из React с включенным TypeScript:

Либо в index.html, либо в some_site.js

function pass_function(){
  alert('42');
}

Тогда из вашего реагирующего компонента:

window["pass_function"]();

И, конечно же, вы можете передать параметр:

//react
window["passp"]("react ts");

//js
function passp(someval) {
  alert('passes parameter: ${someval}');
}