在 ReactJS 中集成 sharethis答案

【问题标题】：Integrate sharethis in ReactJS在 ReactJS 中集成 sharethis
【发布时间】：2019-01-14 13:30:59
【问题描述】：

我需要将 sharethis 集成到我的 reactjs 应用程序中。我需要该脚本仅在一个组件中执行。目前这是我实施的方式。

 componentWillMount() {
 const script = document.createElement("script");
 script.src ="//platform-api.sharethis.com/js/sharethis.js#property=242434664&product=sop?r=" +new Date().getTime();
 script.async = true;
 script.id = "shareThisId";
 document.body.appendChild(script);
}

这个问题是因为这个组件是通过 react 路由挂载的，并且没有发生页面重新加载，脚本没有重新执行。

我尝试使用 removeChild 删除 componentWillUnmount 生命周期中的脚本标签，但这仍然没有在挂载时重新执行脚本，我了解到这是因为这个 - 删除的子节点仍然存在于内存中 根据https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild.

此外，脚本需要在挂载时重新执行，以便我每次都能获得更新的共享计数。

【问题讨论】：

我不确定官方插件的问题是什么，但它仍然不起作用......考虑这个答案stackoverflow.com/a/52770761/1669091

标签： javascript reactjs dom script-tag sharethis

【解决方案1】：

我在 sharethis 工作，我们最近在 https://www.npmjs.com/package/sharethis-reactjs 发布了一个 reactjs 插件。大家可以试试安装使用更方便。

如果您在使用时遇到任何问题，请告诉我，我很乐意为您提供帮助。

【讨论】：

收到此问题Module not found: Can't resolve 'aws-sdk
嗨 Rubel，我们没有在库依赖项中包含 aws-sdk，事实上我们没有使用任何外部库。您能否独立于我们的插件检查该模块是否包含在您的项目中？
github.com/sharethis-github/sharethis-reactjs/issues/3 这是我们面临的问题
您好 Rubel，我们解决了这个问题，您现在可以尝试使用最新版本。
我不确定问题是什么，但它仍然不起作用...考虑这个答案stackoverflow.com/a/52770761/1669091

【解决方案2】：

徐浩，对于它的价值，我厌倦了试图让“官方” sharethis-reactjs 包工作......

您需要在 index.html 中包含 js

<script type='text/javascript' src='//platform-api.sharethis.com/js/sharethis.js#property=YOUR-PROPPERTY-KEY&product=inline-share-buttons' async='async'></script>

这就是我写的……当然，你会想按照自己的方式配置它

import React, {Component} from 'react'
import {isMobile} from 'react-device-detect';


export class ShareButtons extends Component{
    constructor(props){
        super(props);

        var defaultNetworks = isMobile  ? ['facebook', 'twitter', 'pinterest', 'googleplus', 'sharethis', 'sms', 'email'] 
                                        : ['facebook', 'twitter', 'pinterest', 'googleplus', 'sharethis',  'email'];

    this.state = {
        config: {
            id: this.props.id || 'sharethis-inline-buttons',
            networks: this.props.networks || defaultNetworks,
            alignment: this.props.alignment || "right",
            enabled: this.props.enabled !== 'false' || true,
            font_size: this.props.font_size || 11,
            padding: this.props.padding || 8,
            radius: this.props.radius || 20,
            networks: this.props.networks || defaultNetworks,
            size: this.props.size || 32,
            show_mobile_buttons: this.props.show_mobile_buttons !== 'false' || true,
            spacing: this.props.spacing || 2,
            url: this.props.url || window.location.href,
            title: this.props.title || document.title,
            image: this.props.image || "https://18955-presscdn-pagely.netdna-ssl.com/wp-content/uploads/2016/12/ShareThisLogo2x.png", // useful for pinterest sharing buttons
            description: this.props.description || document.getElementsByTagName('meta')["description"].content,
            username: this.props.username || "ChadSteele" // custom @username for twitter sharing
        }
    };



    }

    componentDidMount(){
        window.__sharethis__.load('inline-share-buttons', this.state.config);
    }

    render(){
        return <span id={this.state.config.id || 'sharethis-inline-buttons'}></span>
    }
}

export default ShareButtons;

【讨论】：