通过path.name重新安装componentDidMount（） [英] Remount componentDidMount() by path.name

问题描述

当页面加载时，我在layout index.js document.createElement（script）; c $ c> ReactJS 和 GatsbyJS 项目为

When the page loads I use componentDidMount() to document.createElement("script"); in the layout index.js of a ReactJS and GatsbyJS project as

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

然后请求显示数据并正常工作。但是，当我< link to = ... 使用 gatsby-link 的另一个页面时（想象同样的问题适用）对于 react-router ）， componentDidMount（）已经运行，因此它不会再次获取数据。

This then requests the data to be displayed and works fine. However, when I <link to=... another page using gatsby-link (imagine the same issue applies for react-router), componentDidMount() has already run so it won't fetch the data again.

如何在每个路径已挂载 >通过特定的路径更改或更好？

How can I ensure that this script is mounted after each path change, or better by a specific path?

推荐答案

componentDidMount 第一次运行（并且只是第一次！）组件在DOM中安装。

componentDidMount runs the first time (and only the first time!) the component is mounted in the DOM.

componentDidUpdate 每次组件收到新道具时都会运行，但不会在初始渲染时运行。

componentDidUpdate runs every time the component receives new props, but not for the initial render.

为了在第一个渲染和后续更新的DOM上操作，您需要注册< script> 处理 componentDidMount 和 componentDidUpdate 中的逻辑，即

In order to operate on the DOM for the first render and for subsequent updates, you'll need to register your <script> handling logic in both componentDidMount and componentDidUpdate, i.e.

class YourComponent 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);

    // Keep track of the script tag
    this.scriptTag = tripadvisorLeft
  }

  componentDidUpdate (prevProps) {
    // Figure out if the path changed
    if (this.props.path !== prevProps.path) {
      // Remove the old script tag
      document.body.removeChild(this.scriptTag)

      // Add it back
      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);

      this.scriptTag = tripadvisorLeft
    } 
  }
}

您可以重构此操作以将< script> 创建逻辑移动到辅助函数中，但我在此处内联它以清楚说明什么是继续。

You can refactor this to move the <script> creation logic into a helper function, but I've inlined it here to make it clear what's going on.

这篇关于通过path.name重新安装componentDidMount（）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！