如何在reactjs中重新初始化外部JavaScript？

Question

I am dynamically adding script tag in componentDidMount() on first load. Next when I route to that component I just need the script to re-execute again. Hence I am calling window.__sharethis__.initialize(); . This function gets called, but it doesn't update the count. What function I need to call so that I can re-execute the script.

const script1 = document.getElementById("shareThisId");
            if (script1) {
                window.__sharethis__.initialize();
            } else {
                const script = document.createElement("script");

                script.src =
                    "//platform-api.sharethis.com/js/sharethis.js#property=[some-id]&product=sop?r=" +
                    Math.random();
                script.async = true;
                script.id = "shareThisId";

                document.body.appendChild(script);
            }

Note that, on browser reload, the count gets updated, but not when I route using react-router.

I have also tried removing the script from DOM and adding it again in componentDidMount(). But, removing and updating from dom, will not result in the execution of script.

Answer 1

Since you are using webpack, you can just import the js in the component file. Whenever the component mounts just initiate the function.

import '../../js/example.js'