Как интегрировать виджет Twitter в Reactjs?

Ответ 1

Сначала загрузите Widget JS в свой index.html(перед вашими сценариями React). Затем в вашем компоненте просто выполните следующее. Виджет JS пересканирует DOM.

componentDidMount: function() {
  twttr.widgets.load()
}

Смотрите: https://dev.twitter.com/web/javascript/initialization

Ответ 2

Это работает для меня!

Обратите внимание, что я использую React v0.14 и ECMAScript 2015 (ака ES6) с Babel.

index.html(после тега body):

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

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

Некоторые элементы React (который использует кнопку Twitter):

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

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

Или, если вы хотите создать настраиваемую кнопку, вы можете просто сделать это:

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

Ответ 3

Это легко, все, что вам нужно, просто используйте React componentDidMount hook

{createClass, DOM:{a}} = require "react"

@TwitterWidget = createClass
  componentDidMount: ->
    link = do @refs.link.getDOMNode
    unless @initialized
      @initialized = yes
      js = document.createElement "script"
      js.id = "twitter-wjs"
      js.src = "//platform.twitter.com/widgets.js"
      link.parentNode.appendChild js

  render: ->
    {title, content, widget} = @props
    a
      ref: "link"
      className: "twitter-timeline"
      href: "https://twitter.com/#{widget.path}"
      "data-widget-id": widget.id,
      widget.title

TwitterWidget
  widget:
    id: "your-widget-id"
    title: "Your Twitts"
    path: "widget/path"

Ответ 4

Кажется, что гораздо проще использовать Twitter widgets.js, более конкретно createTimeline.

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

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

Вы можете загрузить библиотеку непосредственно из https://platform.twitter.com/widgets.js, но они рекомендуют следующий фрагмент:

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

Дополнительная информация о настройке библиотеки здесь.

Ответ 5

Вы можете использовать этот React Social Embed Component.

^{Отказ от ответственности: это компонент, созданный мной.}

Установить по: npm i react-social-embed.

Использование:

import TweetEmbed from 'react-social-embed'

<TweetEmbed id='789107094247051264' />
/>

Ответ 6

ИМХО, вы должны разделить его на две части. Часть вашего кода может быть каким-то образом представлена ​​в компоненте React

/**
 * @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');

Твой тег script можно разместить как отдельный компонент React или как обычный HTML чуть выше закрывающего тега body.

Ответ 7

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

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

Ответ 8

Есть несколько интересных решений, но все они вводят текст твиттера на веб-сайт.

Что я предлагаю - создать еще один пустой html файл только для этого виджета. Например. /twitter.html, где вы можете разместить все грязные JavaScripts и визуализировать виджет.

Затем, когда вы включаете:

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

Он будет работать без каких-либо проблем. Кроме того, вы разделили внешние скрипты - так что это хорошо для безопасности.

Просто добавьте стиль, чтобы он выглядел нормально:

twitter.html

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

Реагировать iframe

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