本文介绍了如何将 Twitter 小部件集成到 Reactjs 中?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想将 Twitter 小部件添加到 React 中,但我不知道从哪里开始或如何去做.我对 React JS 很陌生.

这是代码的 HTML 版本:

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

这是我目前所拥有的:

React.DOM.div班级名称:'推特'孩子们: [React.DOM.aclassName: '推特时间线'href:https://twitter.com/"+artist.twitter数据小部件 ID":424584924285239296"数据屏幕名称":artist.twitter儿童:推文"+artist.twitter响应.DOM.脚本孩子们: ...]

我打算在点 (...) 所在的位置添加脚本,但这不起作用.感谢您的帮助.

解决方案

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

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

参见:https://dev.twitter.com/web/javascript/initialization

I want to add the Twitter widget into React, but I don't know where to start or how to do it. I am very new to React JS.

Here is the HTML version of the code:

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

And here is what I have so far:

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

I was planning to add the script where the dots (...) are, but that doesn't work. Thank you for your help.

解决方案

First load Widget JS in your index.html(before your React scripts). Then in your component, simply do the following. The widget JS will rescan the DOM.

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

See: https://dev.twitter.com/web/javascript/initialization

这篇关于如何将 Twitter 小部件集成到 Reactjs 中?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-27 22:07
查看更多