如何将Twitter小部件嵌入reactjs

访问Twitter小部件站点（https://publish.twitter.com/）我能够找到一个窗口小部件来添加到我的网站。我正在使用示例代码来尝试理解Hot的作用：

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

我不知道别人是否仍然遇到这个问题，但是在我的情况下，我从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')
        )
      }
    }

希望别人发现这有用！

i在添加样式之前，在twttr.widgets.load（）方法上显示出显示Tweet文本的问题。这就是我用twttr.widgets.createtweet（）方法解决并添加加载状态的方法。

（还使用Typescript＆amp; tailwind CSS-随时根据需要删除。）

在index.html中添加脚本：

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
  <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 
</body>

创建Tweet组件：

import { useEffect, useState } from "react";
export default function Tweet({
  tweetID,
}: TweetProps) {
  const [isLoading, setIsLoading] = useState(true);
  useEffect(() => {
    if ((window as any).twttr) {
      (window as any).twttr.widgets.createTweet(
        tweetID,
        document.getElementById(tweetID),
        {
          align: 'center',
          conversation: 'none',
          dnt: true,
          theme: 'dark',
        }
      ).then(() => setIsLoading(false));
    };
  }, [tweetID]);
  return (
    <div className="w-full animate-fadeIn" id={tweetID}>
      {isLoading && <p>LOADING</p>}
    </div>
  );
};
interface TweetProps {
  tweetID: string,
};
// twttr.widgets.createTweet:
// https://developer.twitter.com/en/docs/twitter-for-websites/embedded-tweets/guides/embedded-tweet-javascript-factory-function
// Embedded Tweet parameter reference
// https://developer.twitter.com/en/docs/twitter-for-websites/embedded-tweets/guides/embedded-tweet-parameter-reference

用法：

  <Tweet tweetID="1002103497725173760" />

相关内容

最新更新

热门标签：