如何將 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">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>
3 個解決方案
解決方案1
6 已采納 2016-11-29 19:26:29
查看這個 npm 包： react-twitter-widgets 。 這似乎正在完成您需要的開箱即用的功能。
import { Tweet } from 'react-twitter-widgets'
ReactDOM.render(<Tweet tweetId='511181794914627584'/>, document.getElementById('root'))
解決方案2
3 2018-06-27 17:39:10
我不知道其他人是否仍然有這個問題，但在我的情況下，我從 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')
)
}
}
希望其他人覺得這很有用！
解決方案3
2 2022-03-09 16:59:26
在添加樣式之前，我在使用 twttr.widgets.load() 方法顯示推文文本時遇到了問題。 這就是我使用 twttr.widgets.createTweet() 方法並添加加載 state 解決該問題的方法。
（還使用 TypeScript 和 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>
創建推文組件：
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" />
如何將 Twitter 小部件集成到 Reactjs 中？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.