问题描述
我想将 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 中?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!