如何将 Twitter 小部件嵌入 Reactjs？

IT技术 reactjs
2021-04-04 06:40:38

转到 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>
2个回答

查看这个 npm 包：react-twitter-widgets。这似乎正在完成您需要的开箱即用的功能。

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

ReactDOM.render(<Tweet tweetId='511181794914627584'/>, document.getElementById('root'))
这一切都很好。但我没有在节点环境中运行它。
2021-06-05 06:40:38
是的，使用这种方法你会遇到一些复杂情况（从在线/教程/等方面寻找帮助的意义上）......最好的办法是你保留一个 src 文件夹并使用 CommonJS/ES6 组件在本地构建你的应用程序，然后使用 webpack 将其打包成一个不错的 js 文件以上传到 codepen。您的应用程序有多复杂？在某个时候，React 甚至可能无法满足您的需求。
2021-06-05 06:40:38
这一切都在一个静态的 html 文件中，我打算把它放在 codepen 上。
2021-06-07 06:40:38
如果 OP 只需要嵌入，react-tweet-embed就足够了。
2021-06-07 06:40:38
你不是也在使用 npm 来管理你的 React 包吗？它不必在服务器中运行。
2021-06-11 06:40:38

我不知道其他人是否仍然有这个问题，但在我的情况下，我从 API 获取文章正文内容，只是将该 html 插入到 div 中，但无法使推文正常工作。

只是想出了一个解决方案，所以我的 index.html 中有小部件 js。

然后在组件更新时，我检查我的文章内容是否已加载，然后只需调用 twttr.widgets.load()

这是我的 componentDidUpdate 函数：

componentDidUpdate(props) {
      if(this.props.article.status === 'FULFILLED' && this.props.article.status !== props.article.status) {
        twttr.widgets.load(
          document.getElementById('article')
        )
      }
    }

希望其他人觉得这很有用！

这是很久以前的事了，但是 IIRC 我正在使用 twitter JS 库。我无法访问代码，因为从那以后我换了几次工作。我相信现在有很多 twitter 库可以使用。
2021-06-04 06:40:38
嘿:) 你是如何/在哪里实现这个twttr功能的？
2021-06-20 06:40:38
其它你可能感兴趣的问题
上一篇从 REST API 获取数据时，Render 被调用两次 下一篇加载页面时 Firebase auth.currentUser 为空，当页面加载几毫秒后调用 authstatechange 时用户加载