How to refresh Addthis in react?

问题

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;

This is the code that I have so far to initialize addthis. I found this issue on GitHub, but no solutions yet: https://gist.github.com/jonathanconway/9925286

回答1:

Use something like this:

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);

see answer output : HERE

来源：https://stackoverflow.com/questions/59574000/how-to-refresh-addthis-in-react

标签

reactjs

addthis