Является ли componentDidMount причиной исчезновения html.script?

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

Сначала это pages/index.js, и он загружается нормально, без проблем, но при вызове для использования на gatsby созданной странице (exports.createPages = ({ graphql, boundActionCreators }) => {) из шаблона скрипт загрузится, покажет содержимое и затем пойдет.

Вот код для скрипта, монтируемого в компонент -

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

Я не получаю никаких ошибок из консоли.

ПРИМЕЧАНИЕ: В случае связи с ошибкой? У меня также есть этот код, использующий componentDidMount и componentWillUnmount в файле /layout/index.js, который обрабатывает body class для navigation элементов.

componentDidMount () {
  this.timeoutId = setTimeout(() => {
      this.setState({loading: ''});
  }, 100);
  this.innerContainer.addEventListener("scroll", this.handleHeaderStuck), 100;
  this.innerContainer.addEventListener("scroll", this.handleSubNavStuck), 200;
}

componentWillUnmount () {
  if (this.timeoutId) {
      clearTimeout(this.timeoutId);
  }
  this.innerContainer.removeEventListener("scroll", this.handleHeaderStuck);
  this.innerContainer.removeEventListener("scroll", this.handleSubNavStuck);
}

ОБНОВЛЕНИЕ: Весь код

import React from 'react';
import Link from 'gatsby-link'
import styled from 'styled-components'

const Wrapper = styled.section`
  display:block;
`

class ReviewsPage extends React.Component {

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

    render() {           
        return (
            <Wrapper id="tripAdvisor">
                <div id="TA_selfserveprop789" className="TA_selfserveprop">
                    <ul id="3LacWzULQY9" className="TA_links 2JjshLk6wRNW">
                    <li id="odY7zRWG5" className="QzealNl"></li>
                    </ul>
                </div>
            </Wrapper>
        )
    }
}

export default ReviewsPage

reactjs javascript gatsby
person Darren    schedule 08.04.2018    source источник
comment
Пожалуйста, покажите свой метод render()   -  person Jason Spradlin    schedule 08.04.2018
comment
Спасибо @JasonSpradlin. Добавил код компонента. Дайте мне знать, если вам нужно больше.   -  person Darren    schedule 08.04.2018

Ответы (1)


arrow_upward
1
arrow_downward

Итак, все, что делает ваш componentDidMount(), — это добавляет тег <script>, который ссылается на сторонний скрипт. Я предполагаю, что сторонний скрипт пытается добавить некоторую информацию или что-то в DOM (что-то, что вы можете увидеть визуально).

Однако DOM существует только между обновлениями компонентов. React будет полностью перерисовывать DOM (HTML внутри вашего компонента) каждый раз, когда обнаруживает изменение в State или Props. В этом случае я предполагаю, что каждый раз сбрасывается Wrapper.

Я не уверен, как с этим помочь, в основном потому, что вся роль React в приложении на самом деле просто управляет состоянием DOM, и этот скрипт пытается редактировать DOM, но не сообщая об этом React. React может обнаружить недопустимое изменение в DOM, а затем попытаться исправить его, но я действительно не думаю, что React делает это. В любом случае, проблема в том, что React пытается управлять DOM, в то время как другая вещь пытается редактировать DOM, и это плохо кончится.

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

person Jason Spradlin    schedule 08.04.2018
comment
Это имеет большой смысл, Джейсон. Теперь, глядя на это, скрипты прерываются в тот момент, когда моя навигация добавляет класс. Что заставило меня понять, что я сделал опечатку в добавляемом классе. Сейчас поправили, скрипты загружаются нормально. В очередной раз благодарим за помощь. - person Darren; 08.04.2018
comment
Я выбрал этот ответ на свой вопрос, потому что Джейсон был в курсе, что React может обнаружить недопустимое изменение в DOM, а затем попытаться исправить его, но я действительно не думаю, что React делает это. Всем, у кого есть похожая проблема, следует сначала посмотреть здесь. - person Darren; 08.04.2018