Функция не устанавливается вовремя для реагирующего компонента - PullRequest
Новая
       1

Функция не устанавливается вовремя для реагирующего компонента

0 голосов
/ 26 февраля 2019

Я передаю функцию компоненту реагирования, который, как мне кажется, отображается до того, как я получу указанную функцию.

Для того, чтобы запустить ее соответствующим образом, я выполняю в своей функции render следующее: 

render () {
  if (typeof myFunction === 'function'){
    console.warn('MY FUNCTION IS HERE!', myFunction)
    myFunction()
  }

  return (
    <div>
      My component stuff
    </div>
  )
}

В основном, когда компонент впервые рендерится, myFunction не определен, поэтому я проверяю, является ли это функцией раньше.В моем нынешнем виде я получаю console.warn, но myFunction по-прежнему не выполняется.

Имейте в виду, что он устанавливается в голове приложения через тег script.Так что это выглядит примерно так: 

<head>
  {/* Metatags and other scripts in the head */}
  <script src='/static/myFunction.min.js' />
</head>

Интересно, что через консоль все работает как положено.Я что-то не так делаю?

Ответы [ 2 ]

0 голосов
/ 26 февраля 2019

Поскольку вы загружаете функцию в глобальное пространство с помощью тега скрипта, скорее всего, это состояние гонки.То есть ваш компонент React может рендериться до загрузки скрипта с вашей функцией.JavaScript может поднимать определение переменной, то есть он назначает переменную, но не вводит значение до тех пор, пока она не будет готова.

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

Чтобы легко проверить это, можно добавить тайм-аут в конструкторе этого компонента.Установите это значение на 5 секунд, затем выполните функцию.Скорее всего, вы увидите, что он срабатывает правильно.

Что касается решения, это сложно, поскольку вы стираете грани между React и внешним миром.Одна вещь, которую вы могли бы сделать, это иметь скрипт, который импортирует вашу функцию, генерирующую событие в окне.Затем попросите компонент React прослушать это событие и вызвать повторную визуализацию (не уверен, что вы хотите вызывать внешние функции, подобные этой, из вашей функции визуализации, но я уверен, что у вас есть свои причины).

0 голосов
/ 26 февраля 2019

Если ваш скрипт включен в теги <head> без каких-либо атрибутов async или defer, он должен быть загружен до визуализации вашего компонента.Проблема может заключаться в том, что на самом деле делает myFunction.

Если он манипулирует DOM или чем-то, требующим полной загрузки страницы, это может быть проблемой, поскольку DOM не завершает сборку при вызове функции рендеринга, это может объяснить, почему вы можете регистрировать свою функцию, но она ничего не делает

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...