如何将 Twitter 小部件嵌入 Reactjs? [英] How to embed Twitter widget to Reactjs?

问题描述

转到 twitter 小部件站点 (https://publish.twitter.com/) 我可以获取要添加到我的网站的小部件.我正在使用示例代码来尝试了解它的工作原理:

<a class="twitter-grid" href="https://twitter.com/TwitterDev/timelines/539487832448843776">国家公园推文</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

如果我只是将它添加到 HTML 页面，那么代码就可以正常工作.它显示了带有相应推文的网格.

然而，当将它添加到 ReactJS 时，我看到的只是回退代码，它只提供了一个指向 Twitter 用户名的链接.

我尝试使用以下方法但无济于事:

 <divangerlySetInnerHTML={{__html: "<a className='twitter-grid' href='https://twitter.com/TwitterDev/timelines/539487832448843776'>国家公园推文</a> <script async src='https://platform.twitter.com/widgets.js' charset='utf-8'></script>"}}>

解决方案

查看这个 npm 包:react-twitter-widgets.这似乎可以立即完成您需要的功能.

import { Tweet } from 'react-twitter-widgets'ReactDOM.render(<Tweet tweetId='511181794914627584'/>, document.getElementById('root'))

Going to the twitter widget site (https://publish.twitter.com/) I am able to get a widget to add to my site. I am using the sample code to try to understand hot it works:

<a class="twitter-grid" href="https://twitter.com/TwitterDev/timelines/539487832448843776">National Park Tweets</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

If I just add this to an HTML page then the code works exactly as it should. It shows the grid with the respective tweets.

However, when adding this to ReactJS all I see is the fallback code, which merely provides a link to the twitter username.

I have tried using the following to no avail:

  <div dangerouslySetInnerHTML={{__html: "<a className='twitter-grid' href='https://twitter.com/TwitterDev/timelines/539487832448843776'>National Park Tweets</a> <script async src='https://platform.twitter.com/widgets.js' charset='utf-8'></script>"}}>
  </div>

解决方案

Check out this npm package: react-twitter-widgets. This seems to be accomplishing what you need out of box.

import { Tweet } from 'react-twitter-widgets'

ReactDOM.render(<Tweet tweetId='511181794914627584'/>, document.getElementById('root'))

这篇关于如何将 Twitter 小部件嵌入 Reactjs?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！