外部 Javascript React Redux (Tawk.to) 卸载答案

【问题标题】：External Java Script React Redux (Tawk.to) Unmount外部 Javascript React Redux (Tawk.to) 卸载
【发布时间】：2020-08-14 17:12:13
【问题描述】：

我正在尝试将 Tawk.To 小部件添加到我的 React APP。

我已将小部件（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;

【问题讨论】：

标签： javascript redux react-redux widget tawk.to

【解决方案1】：

移除id为“tawkId” onComponentUnmount()的脚本

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

【讨论】：

您好，我将代码更新如下，但在移动到下一页时仍然没有隐藏。 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); } componentWillUnmount() { document.getElementById("tawkId").remove(); }