外部Java脚本React Redux (Tawk.to)卸载

Question

我正在尝试将Tawk.To小部件添加到我的React应用程序中。

我已经将这个小部件(java脚本)添加到我的应用程序中，当我打开页面时，它会完美地加载，但当我移动到另一个页面时，脚本仍然在那里。

有人可以指导我如何卸载这个脚本，当我移动到另一个页面时？

以下是我使用的代码。

import React,{Component} from "react";
import ReactDOM from "react-dom";
import Footer from "../Footer";



class App extends Component {
  componentDidMount() {
    const script = document.createElement("script");
    script.id    = 'tawkId';
    script.async = true;
    script.src   = 'https://embed.tawk.to/' + '5f01080d223d045fcb7b5265' + '/default';
    script.charset = 'UTF-8';
    script.setAttribute('crossorigin', '*');
    document.body.appendChild(script);
  }
  render() {
    return (
      <React.Fragment>
      <Footer active_chat={true} />
      </React.Fragment>
    );
  }
}

export default App;

Answer 1

删除id "tawkId“onComponentUnmount()的脚本

componentWillUnmount() {
     document.getElementById("tawkId").remove();
}