将AddThis添加到React组件

Question

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

我试着找了一下，但我没有找到如何将AddThis集成到ReactJS组件中。

我在某个地方看到过这个，它使用了一个特殊的命名空间，据我所知不太适合React。

<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的好文档？

- Alan Souza

Answer 1

除了更改数据属性之外，您应该使用addthis.layers.refresh()方法动态刷新/加载您的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();
 }

编辑：以上方法是我采用的最初方法，并确实初始化了add this小部件。但是，当属性更改时，小部件似乎不会更新data-url。即使我在props更新后再次调用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
}

- Mark

---

晚了一步，但是...采用这种方法，你如何初始化被引用的 addthis 变量，例如 addthis.update()？我无法看到它在 componentDidMount 函数中的作用域。 - Lea de Groot

它告诉我刷新不是一个函数...而图层是一个函数。 - Erik Parso

Answer 2

我把这个

标签放在页面中以显示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)
    });

  },

- Rob Schlackman

---

当您离开此组件后，如何删除此脚本？ - PCK

@CKA，也许你要找的是componentWillUnmount？ - Rahul Sagore

Answer 3

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

- David L. Walsh

---

谢谢你的帮助，问题已经解决了！ - Alan Souza

Answer 4

这是我做的方法：

请注意，我正在使用内联分享工具箱。

感谢@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;

- Pavel Petrov

---

在Firefox中，这不起作用，在控制台中获取 window.addthis.update 不是一个函数，它会破坏整个React脚本。@Pavel - nickornotto

Answer 5

这是我在实现在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结合使用。

- jvoros

---

请问如何在React中集成分享计数？ - PCK

Answer 6

请将 addthis:url 替换为 data-url

- Sagiv Ofek