Question

我在将外部脚本安装到我的React / Gatsby应用程序的组件时遇到问题。下面的脚本被调用到整个app中两个地方使用的组件。

首先是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

更新：所有代码

UTC

Answer 1

因此，您componentDidMount()所做的就是添加引用第三方脚本的<script>标记。我假设第三方脚本试图向DOM添加一些信息或事物（你可以直观地看到）。

但是，DOM仅存在于组件更新之间。只要检测到状态或道具的更改，React就会完全重绘DOM（组件内的HTML）。我假设在这种情况下，Wrapper每次都会重置。

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

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

componentDidMount会导致html.script消失吗？

1 个答案: