componentDidMount 是否导致 html.script 消失？

Question

我在将外部脚本安装到我的 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 处理 navigation 元素的 body class 的代码。

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

Answer 1

因此，您的 componentDidMount() 所做的只是添加一个引用第三方脚本的 <script> 标签。我假设第三方脚本试图向 DOM 添加一些信息或东西（你可以在视觉上看到的东西）。

但是，DOM 仅存在于组件更新之间。只要 React 检测到 State 或 Props 发生变化，它就会完全重绘 DOM（组件内部的 HTML）。在这种情况下，我假设每次都重置 Wrapper。

我不确定如何解决这个问题，主要是因为 React 在应用程序中的整个角色实际上只是管理 DOM 的状态，并且该脚本正在尝试编辑 DOM，但没有告诉 React。 React 可能感知到 DOM 的无效更改然后尝试更正它，但我真的不认为 React 会那样做。无论如何，问题在于 React 正在尝试管理 DOM 而另一件事正在尝试编辑 DOM，而这不会很好地结束。

如果你有一个异步调用其他服务并接收数据的脚本，然后让 React 将该数据应用到 DOM，而不是让脚本编辑 [=23]，那就更好了=] 本身。当然，您可能无法控制外部脚本的实际工作方式，这就是为什么我说我不确定如何提供帮助。

componentDidMount 是否导致 html.script 消失？

Is componentDidMount causing html.script to disappear?

javascript

reactjs

gatsby