[英]Integrate sharethis in ReactJS
我需要在reactjs應用程序中集成sharethis。 我需要該腳本只在一個組件中執行。 目前這是我實施的方式。
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);
}
這個問題是因為這個組件是通過反應路由安裝的,並且頁面重新加載不會發生,所以腳本不會重新執行。
我嘗試使用removeChild刪除componentWillUnmount生命周期中的腳本標記,但是仍然沒有在掛載時重新執行腳本,並且我了解到它是因為這樣 - 根據https:// 刪除的子節點仍然存在於內存中 developer.mozilla.org/en-US/docs/Web/API/Node/removeChild 。
此外,腳本需要在mount上重新執行,以便每次都獲得更新的共享計數。
我在sharethis工作,最近我們在https://www.npmjs.com/package/sharethis-reactjs上發布了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;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.