将 AddThis 添加到 React 组件

Question

我有一个基于 ReactJS 的博客实现，我想将其与 AddThis 集成。我有我的社交偶像，我想使用它们。所以我正在寻找一种仅集成 AddThis 后端服务的方法。

我试着环顾四周，但找不到如何将 AddThis 集成到 ReactJS 组件中。

我在某个地方看到过这个，它使用了一个特殊的命名空间，据我所知，它对反应不友好。

<div addthis:url='blog_url' addthis:title='blog_title' class="addthis_toolbox">
<a class="addthis_button_facebook">
 <svg ... />
</a>

<a class="addthis_button_twitter">
  <svg ... />
</a>

<a class="addthis_button_linkedin">
  <svg ... />
</a>

<a class="addthis_button_reddit">
  <svg ... />
</a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4fc9383e1ee05f1b"></script>

另外，我看到这个 JSFiddle 有一些信息，但它没有使用 ReactJS，也没有使用自定义图标。

问题：关于 AddThis + React 有什么好的文档吗？

Answer 1

将 addthis:url 和 addthis:title 替换为 data-addthis-url 和 data-addthis-title。

Answer 2

我把这个 div 放在里面是为了显示 addthis 按钮。

<div className="addthis_inline_share_toolbox" data-url={  `http://[Your URL]` } data-title={ `[Your Title]` }></div>

但我还需要在安装组件后加载 javascript，否则按钮永远不会显示。我假设如果您将 javascript 添加到您的模板，它会在 share_toolbox 加载之前加载。

componentDidMount() {
    setTimeout( () => {
      var addthisScript = document.createElement('script');
      addthisScript.setAttribute('src', 'http://s7.addthis.com/js/300/addthis_widget.js#pubid=[your id here]')
      if (document.body) document.body.appendChild(addthisScript)
    });

  },

Answer 3

除了数据属性更改之外，您还应该使用 addthis.layers.refresh() 方法动态地 refresh/load 您的 AddThis 组件：

 render() {
    return (
        <div className="addthis_inline_share_toolbox" 
            data-url={this.props.myurl} 
            data-title="Check out this URL"
            >
        </div>
    );
 }

然后在componentDidMount():

 componentDidMount() {
     addthis.layers.refresh();
 }

编辑：上面的方法是我最初采用的方法，它确实初始化了添加这个小部件，但是，小部件似乎没有更新数据-url 当道具改变时。即使我在道具更新后再次调用 addthis.layers.refresh();

动态更新方案：

在我的渲染方法中：

// Don't use data attributes
<div className="addthis_inline_share_toolbox"></div>

使用生命周期方法：

componentDidMount() {
    addthis.layers.refresh(); // important! init the add this widget
    addthis.update('share', 'url', 'my-initial-url'); // update with initial prop value
}

componentDidUpdate() {
    addthis.update('share', 'url', this.props.myurl); // update with prop value
}

componentWillReceiveProps(nextProps) {
    addthis.update('share', 'url', nextProps.myurl); // update with prop value
}

Answer 4

这是我能找到的关于在 React 应用程序中实现 AddThis 的唯一信息。最终帮我搞定了。我正在为遇到此问题的任何其他人发布我的解决方案。

使用 React Router 和 AddThis 带来了一些挑战。关键是将 addThis javascript 方法附加到 window 事件而不是 React 生命周期事件。

我使用 react-load-script 在我的应用程序主页上异步加载脚本，并实现了一个回调来初始化 addThis 小部件，然后设置状态以指示是否加载了 addThis。然后该状态被传递给组件。

部分代码：

import * as LoadScript from 'react-load-script';

class App extends React.Component {
    constructor(props) {
        this.state = { addThisLoaded: false }
    }

    handleScriptLoad() {
        this.setState({ addthisLoaded: true });
        window.addthis.init();
    }    
    render() {
        return (
            <LoadScript
              url="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxxxxxxxxxxxxxxx"
              onLoad={this.handleScriptLoad.bind(this)}
            />
            <Switch>
                <Route exact path="/" component={Home} />
                <Route path="/page/:id"
                  render={routeProps => (<Page {...routeProps} addThisLoaded={this.state.addThisLoaded} />)}
                 />
            </Switch>
         );
    }
}

然后在实现 addThis 小部件的组件中，我将 window 事件侦听器附加到 React 生命周期挂钩。 addThisLoaded 道具可用于有条件地呈现小部件。

export default class Page extends React.Component<Props> {
  componentDidMount() {
    window.addEventListener('load', window.addthis.layers.refresh());
  }

  componentWillUnmount() {
    window.removeEventListener('load', window.addthis.layers.refresh);
  }

  render() {
    const page_url = `YOUR URL GOES HERE`;
    const page_title = `YOUR TITLE GOES HERE`;
    return (
      <div>
        {this.props.addThisLoaded === true && (
            <div className="addthis_inline_share_toolbox" data-url={page_url} data-title={page_title} />
        )}
      </div>
    );
  }
}

如果有更好的方法来处理它，我很乐意听到。 AddThis API 文档很少。而且它操纵 DOM 以获得所需行为的事实使得与 React Router 合并变得棘手。

Answer 5

将addthis:url替换为data-url

Answer 6

我是这样做的：

请注意，我使用的是内联共享工具箱。

感谢@Mark addthis.update，感谢@jvoros react-load-script

import React, { useEffect } from 'react';
import Script from 'react-load-script';

const AddThis = (props) => {
    useEffect(() => {
        if (window.addthis) {
            window.addthis.update('share', 'url', props.url); 
        }
    }, [props.url]);

    const handleAddthisLoaded = () => {
        window.addthis.init();
        window.addthis.update('share', 'url', props.url);
    };

    return (
        <>
        <div className="addthis_inline_share_toolbox"></div>
        <Script
            url="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxxxxxxxxxxxxxxx"

            onLoad={handleAddthisLoaded} />
       </>                  
    );
}

export default AddThis;

将 AddThis 添加到 React 组件

Add AddThis to React component

javascript

addthis

reactjs