Javascript 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);
}

我没有从控制台收到任何错误

注意：如果与错误有关，我也在

/layout/index.js

文件中使用

componentDidMount

和

componentWillUnmount

来处理

导航
元素的
主体
类

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

从“React”导入React；
从“盖茨比链接”导入链接
从“样式化组件”导入样式化
const Wrapper=styled.section`
显示：块；
`
类ReviewPage扩展React.Component{
组件安装（）{
const tripadvisorLeft=document.createElement（“脚本”）；
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；
文件.body.appendChild（tripadvisorLeft）；
}
render（）{
返回(



)
}
}
导出默认的ReviewPage
因此，您的
组件didmount（）
所做的只是添加一个引用第三方脚本的
标记。我假设第三方脚本试图向DOM添加一些信息或东西（您可以直观地看到）

但是，DOM只存在于组件更新之间。React会在任何时候检测到状态或道具的更改时完全重新绘制DOM（组件中的HTML）。在这种情况下，我假设每次重置的都是包装器

我不知道如何帮助这一点，主要是因为React在应用程序中的整个角色实际上只是管理DOM的状态，而该脚本正在尝试编辑DOM，但没有告诉React。React可能会检测到对DOM的无效更改，然后尝试更正它，但我真的认为React不会这样做。无论如何，它是sue是React试图管理DOM，而另一件事是试图编辑DOM，这不会有好结果

如果您有一个脚本可以异步调用另一个服务并接收数据，然后让React将该数据应用到DOM，而不是让脚本编辑DOM本身，那就更好了。当然，您可能无法控制外部脚本的实际工作方式，这就是我说我不确定如何提供帮助的原因。
se显示您的渲染（）methodThank@JasonSpradlin。已经为组件添加了代码。如果您需要更多，请告诉我。这很有意义，Jason。现在看看它，脚本在我的导航添加了一个类时中断。这让我意识到我在添加的类上犯了一个错误。现在已经纠正了脚本加载错误。再次感谢或者您的帮助。我选择这个问题的答案是因为Jason说“React可能会检测到DOM的无效更改，然后试图更正它，但我真的不认为React会这样做。”任何有类似问题的人都应该先看这里。