Question

我想将Twitter小部件添加到React中，但我不知道从哪里开始或如何做到这一点。我是React JS的新手。

以下是代码的HTML版本：

<div class="Twitter">
  <a class="twitter-timeline" href="https://twitter.com/<%= @artist.twitter %>" data-widget-id="424584924285239296" data-screen-name='<%= @artist.twitter %>'>Tweets by @<%= @artist.twitter %></a>
  <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>

这是我到目前为止所做的：

React.DOM.div
  className: 'Twitter'
  children: [
    React.DOM.a
      className: 'twitter-timeline'
      href: "https://twitter.com/" + artist.twitter
      'data-widget-id': "424584924285239296" 
      'data-screen-name': artist.twitter
      children: 'Tweets by ' + artist.twitter
    React.DOM.script
      children: ...
  ]

我打算添加点（...）所在的脚本，但这不起作用。谢谢你的帮助。

Answer 1

首先在index.html中加载Widget JS（在React脚本之前）。然后在您的组件中，只需执行以下操作即可。小部件JS将重新扫描DOM。

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

请参阅：https://dev.twitter.com/web/javascript/initialization

Answer 2

这对我有用！

请注意，我使用React v0.14和ECMAScript 2015（又名ES6）与Babel。

index.html（在正文标记之后）：

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

Answer 3

很简单，只需使用React＆＃39; componentDidMount挂钩

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

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

有关设置库的更多信息，请here。

Answer 5

您可以使用此React Social Embed Component。

^{免责声明：这是我创建的一个组件。}

按：npm i react-social-embed安装。

用法：

import TweetEmbed from 'react-social-embed'

<TweetEmbed id='789107094247051264' />
/>

Answer 6

尝试通过执行npm install react-twitter-embed安装 react-twitter-embedd 。安装后，用法非常简单。看看下面的屏幕截图。

代码示例：

import React from 'react';

import { TwitterTimelineEmbed } from 'react-twitter-embed';

const TwitterTimeLine = () => {

  return (
    <TwitterTimelineEmbed
      sourceType="profile"
      screenName="accimeesterlin" // change to your username
      options={{height: 1200}}
    />
  );
}

export default TwitterTimeLine;

它们还列出了您也可以使用的其他组件。

可用组件列表

TwitterShareButton
TwitterFollowButton
TwitterHashtagButton
TwitterMentionButton
TwitterTweetEmbed
TwitterMomentShare
TwitterDMButton
TwitterVideo嵌入
TwitterOnAirButton

这里是npm软件包https://www.npmjs.com/package/react-twitter-embed

的链接

Answer 7

恕我直言，你应该把它分成两部分。代码的一部分可以以某种方式呈现在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');

您的脚本标记可以作为单独的React组件放置，也可以放在关闭正文标记上方的普通HTML中。

Answer 8

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

Answer 9

有一些有趣的解决方案，但所有这些都是向网站注入twitters代码。

我建议为这个小部件创建另一个空的html文件。例如。 /twitter.html，您可以在其中放置所有脏JavaScripts并呈现小部件。

然后当你包括：

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

它没有任何问题。另外，您已经分离了外部脚本 - 因此它有利于安全。

只需添加一些样式以使其看起来很好：

twitter.html

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

React的iframe

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

如何将Twitter小部件集成到Reactjs中？

9 个答案: