有什么方法可以将React refs与需要DOM元素的窗口对象上的方法一起使用吗

Question

我正在编写一个React应用程序，它嵌入了从API获取的推文列表。我知道已经存在react-twitter-embed和react-twitter-widgets，但与Twitter自己的twttrjavascript小部件相比，这两种小部件在加载时间和滚动时的视觉性能方面都非常慢。

使用Twitter小部件的唯一问题是，为了实现延迟加载，使应用程序在屏幕上显示包含Tweet的div之前不会真正调用Twitter的嵌入式API，我似乎必须进行一些直接的DOM引用，我知道这在React中是不好的。

"；React调味的"；我第一次尝试的版本看起来像这样：

Tweet component

const tweetDOMId = `twt-${tweet.twtId}`
const divDOMId = `div-${tweet.twtId}`
const tweetRef = createRef()
<div id={divDOMId} ref={tweetRef}>
<blockquote
id={tweetDOMId}
className='twitter-tweet'
data-dnt='true'
data-theme='dark'>
<a href={twtUrl}></a>
</blockquote>
</div>

Parent component

const loadTweet = (tweetRef) => {
window.twttr.widgets.load(tweetRef)
window.twttr.events.bind('rendered', (event) => {
setLoadedTweet(event.target.(...).tweetId)
})
}

然而，Twitterwidgets.load()方法无法找到合适的元素以这种方式转换为嵌入的tweet。相反，我不得不这样写：

Tweet component

const tweetDOMId = `twt-${tweet.twtId}`
<blockquote
id={tweetDOMId}
className='twitter-tweet'
data-dnt='true'
data-theme='dark'>
<a href={twtUrl}></a>
</blockquote>

Parent component

const loadTweet = (elementId) => {
window.twttr.widgets.load(document.getElementById(`${elementId}`))
window.twttr.events.bind('rendered', (event) => {
setLoadedTweet(event.target.(...).tweetId)
})
}

所以我想知道在这种情况下是否有办法不使用document.getElementById()？一种在不查询DOM的情况下为window.twttr.widgets.load()提供对其所需元素的引用的方法？

Twitter建议使用document.getElementById()，但链接中的示例显然是针对vanilla-js的，而不是React。

Answer 1

您似乎试图直接加载ref，而不是ref.current。