Question

我设法让以下Twitter帐户按钮与此代码做出反应：

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

  componentDidMount() {
    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');
  }
}

来自http://qiita.com/h_demon/items/95e638666f6bd479b47b

如何绑定事件？ https://dev.twitter.com/web/javascript/events

我添加了

var twttr = document.getElementById('twitter-wjs')

twttr.ready(function (twttr) {
  // Now bind our custom intent events
  twttr.events.bind('click', clickEventToAnalytics);
  twttr.events.bind('tweet', tweetIntentToAnalytics);
  twttr.events.bind('retweet', retweetIntentToAnalytics);
  twttr.events.bind('like', likeIntentToAnalytics);
  twttr.events.bind('follow', followIntentToAnalytics);
});

到componentDidMount。它没有用。

Answer 1

直接使用window.twttr而不是document.getElementById - 并在componentDidMount内执行此操作。

import ReactDOM from 'react-dom';
import React from 'react';

class AppComponent extends React.Component {
  render() {
    return (
      <a href='https://twitter.com/share' className='twitter-share-button' ref='share' data-url='https://twitter.com/'>Tweet</a>
    );
  }

  onClick() {
    console.log("Clicked");
  }

  componentDidMount() {
    window.twttr.events.bind('click', this.onClick);
  }
}

ReactDOM.render(<AppComponent />, document.getElementById('app'));

<!doctype html>
<html>
<head>
  <title>Twitter Share</title>
</head>
<body>
  <script>!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');
  </script>
  <div id="app"></div>
  <script type="text/javascript" src="assets/app.js"></script>
</body>
</html>

编辑以考虑反馈：根据文档here以及index.html内包含的脚本，window.twttr已分配，准备好你使用。您不需要访问任何其他元素 - 直接使用window.twttr来绑定事件。点击即可绑定，您可以根据需要添加更多内容，并将其分配给您创建的相应回调。

Twitter API与反应JS

1 个答案: