如何在反应中刷新Addthis？

Question

import React from "react";
import LoadScript from "react-load-script";
function Addthis() {
  return (
    <LoadScript url="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxxx" />
  );
}

export default Addthis;

这是到目前为止我用来初始化addthis的代码。我在GitHub上发现了此问题，但尚未找到解决方案：https://gist.github.com/jonathanconway/9925286

Answer 1

使用类似这样的内容：

import React from "react";
import ReactDOM from "react-dom";
import LoadScript from "react-load-script";
import "./styles.css";        

function Addthis() {
  const handleScriptLoad=()=>{    
    window.addthis.init();
    window.addthis.toolbox('.addthis_toolbox')    
    console.log("addthis Loaded");
  }
  return (
    <div>
    <LoadScript 
     url="https://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxxx" 
    onLoad={handleScriptLoad}
    />    
    <div class="addthis_toolbox addthis_default_style " style={{margin: "20px"}}>
    <a class="addthis_button_preferred_1"></a>
    <a class="addthis_button_preferred_2"></a>
    <a class="addthis_button_preferred_3"></a>
    <a class="addthis_button_preferred_4"></a>
    <a class="addthis_button_compact"></a>
    <a class="addthis_counter addthis_bubble_style"></a>
</div>
<hr/>
</div>
  );
}


function App() {  
  return (
    <div className="App">
      <Addthis />
      <h1>Hello addthis</h1>
      <h2>Buttons loaded (upper, left) of screen</h2>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

请参阅答案输出：HERE