reactjs - 如何将 Twitter 小部件嵌入到 Reactjs 中?

标签 reactjs

访问 Twitter 小部件网站 ( https://publish.twitter.com/ ),我可以获得一个小部件以添加到我的网站。我正在使用示例代码来尝试了解它的工作原理:

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

如果我只是将其添加到 HTML 页面,那么代码将完全正常工作。它显示带有相应推文的网格。

但是,当将其添加到 ReactJS 时,我看到的只是后备代码,它仅提供指向 twitter 用户名的链接。

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

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

最佳答案

查看这个 npm 包:react-twitter-widgets 。这似乎可以满足您开箱即用的需求。

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

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

关于reactjs - 如何将 Twitter 小部件嵌入到 Reactjs 中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40874121/

相关文章:

jquery - React 中的第三方 DOM 操作

javascript - 如何在条件渲染中预渲染 React 组件?

javascript - Redux 中的异步操作

javascript - React Prop 规范化或计算属性

javascript - 在组件渲染中调用高阶组件

reactjs - React useState 导致无限循环

javascript - 如何在行的 onClick 上而不是在 onMouseLeave 之后将 rowClassName 添加到 antd 表中的特定行

reactjs - react v16 : Uncaught TypeError: Cannot read property 'object' of undefined

javascript - 在 ReactJS 中,使用 Reactstrap,我希望我的警报停留在它开始的屏幕上的同一个位置

node.js - 我可以使用 webpack 的热模块重新加载和 sailsjs 吗?