Add AddThis to React component

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() динамически обновлять/загружать компоненты 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(); 
} 

EDIT: выше метод - это начальный подход, который я взял, и инициализирует добавление этого виджета, однако, похоже, виджет не обновляет URL-адрес данных, когда t он подкрепляется. даже если я называю 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

Это был единственным информацию, которую я мог найти при реализации AddThis в приложении React. В конце концов помог мне исправить ситуацию. Я отправляю свое решение для всех, кто сталкивается с этим.

Использование React Router и AddThis представляет некоторые проблемы. Ключ был прикреплен к методам javascript addThis к событиям 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 слушателей событий РЕАКТА жизненного цикла крючки. Поддержка 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> 
    ); 
    } 
} 

Если есть лучший способ справиться с этим, я бы хотел услышать. Документы API AddThis разрежены. И тот факт, что он управляет DOM для получения желаемого поведения, затрудняет его включение с React Router.

Answer 5

Заменить addthis:url с data-url