Монтирование внешних скриптов, которые преобразуют DOM в React Components? - PullRequest
Новая
       10

Монтирование внешних скриптов, которые преобразуют DOM в React Components?

0 голосов
/ 30 апреля 2018

Нуждается в решении проблемы, которую я задавал многими способами без разрешения.

У меня есть внешние скрипты от TripAdvisor, которые монтируются в компоненте как componentDidMount. Также shouldComponentUpdate() как false, чтобы избежать в будущем eventListeners, также установленный componentDidMount в layouts/index.js от влияния на содержание TripAdvisor, чтобы исчезнуть из-за повторного рендеринга DOM. 

componentDidMount () {
    const tripadvisorLeft = document.createElement("script");
    tripadvisorLeft.src = "https://www.jscache.com/wejs?wtype=selfserveprop&uniq=789&locationId=10467767&lang=en_AU&rating=true&nreviews=0&writereviewlink=true&popIdx=true&iswide=true&border=false&display_version=2";
    document.body.appendChild(tripadvisorLeft);

    const tripadvisorRight = document.createElement("script");
    tripadvisorRight.src = "https://www.jscache.com/wejs?wtype=selfserveprop&uniq=998&locationId=10467767&lang=en_AU&rating=false&nreviews=4&writereviewlink=false&popIdx=false&iswide=true&border=false&display_version=2";
    document.body.appendChild(tripadvisorRight);
}

shouldComponentUpdate() {
    return false;
}

Проблема заключается в том, что при использовании Link либо react-route, либо gatsby-link со страницы, содержащей компонент, содержимое TripAdvisor не отображается.

Если я обновлю браузер на странице - контент будет доступен. Смотрите здесь - пример

Как мне unmount, forceUpdate или любое другое решение для повторного рендеринга этих скриптов на route change?

Полный исходный код можно найти здесь .

1 Ответ

0 голосов
/ 30 апреля 2018

Похоже, что сценарий TripAdvisor создает функцию с именем injectselfserveprop***. (где *** - случайные числа).

Эта функция отвечает за отображение HTML-кода виджета TripAdvisor .

Однако по непонятной причине эта функция не вызывается, когда вы достигаете Компонента с помощью Link.

Это одно из решений вашей проблемы, и оно может быть не лучшим:

1) Определите теги вашего скрипта в src / layouts / index.js

Поскольку сценарий TripAdvisor 'создает эти функции, мы должны определить сценарии перед рендерингом компонента TripAdvisor. 

<Helmet>
  // ...
  <script src={`https://www.jscache.com/wejs?wtype=selfserveprop&uniq=789&locationId=10467767&lang=en_AU&rating=true&nreviews=0&writereviewlink=true&popIdx=true&iswide=true&border=false&display_version=2`}/>
  <script src={`https://www.jscache.com/wejs?wtype=selfserveprop&uniq=998&locationId=10467767&lang=en_AU&rating=false&nreviews=4&writereviewlink=false&popIdx=false&iswide=true&border=false&display_version=2`}/>
</Helmet>

2) вызов функции injectselfserveprop для TripAdvisor componentDidMount () 

componentDidMount() {
  // find any function that begins with 'injectselfserveprop'
  // and execute it.
  Object.keys(window).forEach((key) => {
    if (key.match(/^injectselfserveprop[0-9]+$/)) {
      window[key]();
    }
  });
}

Я пробовал это, и это работает для меня.

...