Wie integrieren Sie das Twitter-widget in Reactjs?

Dies funktioniert für mich!

Bitte beachten Sie, dass ich Reagieren v0.14 und ECMAScript 2015 (aka ES6) mit Babel.

index.html (nach dem body-tag):

<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>

Twitter-Komponente:

const Twitter = () => (
  <a href="https://twitter.com/your-twitter-page"
    className="twitter-follow-button"
    data-show-count="false"
    data-show-screen-name="false"
  >
  </a>
);

Einige Reagieren Komponente (verwendet Twitter-button):

class SomeReactComponent extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <Twitter />
      </div>
    );
  }
}

Oder wenn Sie möchten, um eine benutzerdefinierte Schaltfläche, Sie können einfach tun dies:

const Twitter = () => (
  <a href="https://twitter.com/intent/tweet?via=twitterdev">
    <i className="zmdi zmdi-twitter zmdi-hc-2x"></i>
  </a>
);

Scheint es viel einfacher zu benutzen Sie einfach den Twitter widgets.js insbesondere createTimeline.

class TwitterTimeline extends Component {
  componentDidMount() {
    twttr.ready(() => {
      twttr.widgets.createTimeline(widgetId, this.refs.container)
    })
  }

  render() {
    return <div ref="container" />   
  }
}

Laden Sie die Bibliothek direkt aus https://platform.twitter.com/widgets.js, aber Sie empfehlen folgende snippet:

<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>

Weitere Informationen über die Einrichtung der Bibliothek ist hier.

IMHO sollten Sie Spalten ihn in zwei.
Ein Teil der code könnte irgendwie gerendert Reagieren Komponente

/**
 * @jsx React.DOM
 */
var React = require('react');
var twitterWidget = React.createClass({
    render: function () {
        return (
            <div class="Twitter">
                <a class="twitter-timeline" 
                   href={this.props.link} 
                   data-widget-id={this.props.widgetId} 
                   data-screen-name={this.props.screenName} > 

                   Tweets by {this.props.screenName}
                </a>
            </div>
        );
    }
});
React.renderComponent(<twitterWidget link="..." widgetId="..." />, document.getElementById('containerId');

Ihre script-tag platziert werden konnte, als eine separate Reagieren Komponente oder als normale HTML-knapp über dem schließenden body-tag.

Gibt es einige interessante Lösungen, aber alle diese sind intravenös Twitter-code zur Internetseite.

Was würde ich vorschlagen, die zu erstellen einen anderen leere html-Datei nur für dieses widget. ZB. /twitter.html, wo Sie können, legen Sie alle schmutzige Javascript-und rendering-widget.

Dann, wenn Sie enthalten:

<iframe src="/twitter.html" />

Wird es ohne Probleme funktionieren. Plus, Sie haben sich getrennt, externe Skripts es ist also gut für die Sicherheit.

Nur fügen Sie einige styling machen es gut Aussehen:

twitter.html

html,
body {
  margin: 0;
  padding: 0;
}

Reagieren die iframe

iframe {
  border: none;
  height: ???px;
}