ReactでTwitterの共有ボタンを置く

ReactでTwitterの共有ボタンを置くのに色々やったのでメモ。
以下はbabelで書いてある。

class TwitterShareButton extends React.Component {
  render() {
    return <a href="https://twitter.com/share" className="twitter-share-button">Tweet</a>
  }

  componentDidMount() {
    // scriptタグが埋め込まれた後にTwitterのaタグが置かれても機能が有効にならないので、すでにscriptタグが存在する場合は消す。
    var scriptNode = document.getElementById('twitter-wjs')
    if (scriptNode) {
      scriptNode.parentNode.removeChild(scriptNode)
    }

    // ボタン機能の初期化（オフィシャルのボタン生成ページで生成されるものと同じもの）
    !function(d,s,id){
      var js,
          fjs=d.getElementsByTagName(s)[0],
          p=/^http:/.test(d.location)?'http':'https';
      if(!d.getElementById(id)){
        js=d.createElement(s);
        js.id=id;
        js.src=p+'://platform.twitter.com/widgets.js';
        fjs.parentNode.insertBefore(js,fjs);
      }
    }(document, 'script', 'twitter-wjs');
  }
}

Twitter共有ボタン機能は、widgets.jsというコードを動的に読み込み、指定のaタグを共有ボタン化することで実現される。が、widgets.jsを読み込んだ後にaタグを貼り付けても意味が無い。

Reactの仕組み上（というかSPAの仕組み上）widgets.jsの読み込み後に共有ボタンのHTMLを貼り付ける場合があるので、widgets.jsを強制的に破棄してもう一度読み込む仕組みにした。

本来はwidgets.jsを解析して中の初期化メソッドを呼ぶべきだと思う。上記の方法だと、aタグのレンダリングからボタン機能の有効化までに間が空いてしまい、一瞬素のaタグが見えてダサい。