通过 path.name 重新挂载 componentDidMount()

Question

当页面加载时，我在 ReactJS 和 GatsbyJS 项目的布局 index.js 中使用 componentDidMount() 到 document.createElement("script");

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() 已经运行，因此它不会再次获取数据。

如何确保在每次path 更改后此脚本为mounted，或者通过特定的path 更好？

Answer 1

您可以使用gatsby-link 包中的navigateTo 来滚动您自己的Link 组件，该组件在导航之前执行您的自定义逻辑。

Link.jsx

import React from "react";
import { navigateTo } from "gatsby-link";

const RESOURCE_PATH = "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";
const refetchAndNavigate = (path) => () => {
  // refetch
  const tripadvisorLeft = document.createElement("script");
  tripadvisorLeft.src = RESOURCE_PATH;
  tripadvisorLeft.async = true;
  document.body.appendChild(tripadvisorLeft);

  // finally navigate
  navigateTo(path);
}

const Link = ({ to, ...propsToPass }) => (
  <div {...propsToPass} onClick={refetchAndNavigate(to)}/>
);

export default Link;

我没有测试过这段代码，但想法会起作用。

Answer 2

componentDidMount 第一次运行（也是第一次！）组件被挂载在 DOM 中。

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

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

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> 创建逻辑移动到辅助函数中，但我已将其内联到此处以明确发生了什么。

Answer 3

您可以添加在组件更新时调用的componentDidUpdate生命周期方法：

componentDidUpdate(prevProps) {
  // check if path has changed
  if (prevProps.pathname !== this.props.pathname) { 
    // call something to fetch data
  }
}

您可以添加更多条件以仅匹配某些路径。

检查您的 gastby-link 库，了解如何获取当前路径名以作为道具传递。

您还可以尝试从父组件传递pathname={window.location.pathname}，当路径更改时，该组件会重新渲染。

Answer 4

您能否使用 HOC 来完成您想要的。我只是把它放在一起，它需要修改。

创建一个类似的组件，

const withTracking = (WrappedComponent) => {
    return class withTracking extends React.Component {
        constructor(props) {
            super(props);

            this.trackit = this.trackIt.bind(this);
        }

        trackIt() {
            {
                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 (
                <div>
                    <WrappedComponent {...this.props} trackIt={this.trackIt} />
                </div>
            );
        }
    }
};

然后在 react router 中像这样包装它，

<Route exact path="/pet-of-the-week" component={withTracking(TEST)}/>

并且在组件中使用componentDidMount，

const TEST = (WrappedComponent) => {
    return class ClickLogger extends React.Component {
        constructor(props) {
            super(props);
        }

        componentDidMount() {
            this.trackIt();
        }

        render() {
            return (
                <div>
                    <h1>something</h1>
                </div>
            );
        }
    }
};