将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.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();
 }

编辑:上面的方法是我采取的初始方法,并初始化添加此小部件,但是,当改变道具时,小部件似乎不更新数据网址.即使我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 2

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