How to connect social media share buttons in React?

Question

JavaScript

Hello. There is an isomorphic SPA. It is necessary to connect share-buttons of social networks to some pages. How to do it? It would be great with an example. Thanks in advance

Answer 1

The trick is that for such components initialized by javascript, you need to do initialization in componentDidMont through access using ref:
codepen.io/evilandfox/pen/jAxJxv

<script type="text/javascript" src="http://vk.com/js/api/share.js?93" charset="windows-1251"></script>
<script>window.twttr = (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0],
    t = window.twttr || {};
  if (d.getElementById(id)) return t;
  js = d.createElement(s);
  js.id = id;
  js.src = "https://platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);
 
  t._e = [];
  t.ready = function(f) {
    t._e.push(f);
  };
  return t;
}(document, "script", "twitter-wjs"));</script>
<div id="main"></div>

var Component = React.createClass({
  componentDidMount: function(){
    this.refs.vk.innerHTML = VK.Share.button(false, {type: "round", text: "Сохранить"});
    twttr.widgets.createShareButton(
      'https://dev.twitter.com/',
      this.refs.tw,
      {
        text: 'Hello World'
      });
  },
  render: function(){
    return (
      <div>
        <h4>Поделиться:</h4>
        <div ref="vk"></div>
        <div ref="tw"></div>
      </div>
    );
  }
});

ReactDOM.render(<Component/>, document.getElementById("main"));

Answer 2

How do you do it? I get an error "error 'VK' is not defined"