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

我把这个div放进来显示addthis按钮。

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

但我还需要在安装组件或按钮永不显示后加载javascript。我假设您在加载share_toolbox之前将javascript添加到模板中。

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:url和addthis:title替换为data-addthis-url和data-addthis-title。

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 prop可用于有条件地呈现小部件。

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组件

6 个答案: