我正在建立一个网站的反应和使用Wordpress作为一个无头CMS的博客。我的一些帖子使用Wordpress内置的Twitter小部件,将一个或多个tweet嵌入其中。
当我从Wordpress REST调用post时,Wordpress Twitter小部件不会呈现。它只传递tweet的基本内容以及通用的Twitter嵌入脚本:
<script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
有什么办法可以让我的反应前端识别来自Wordpress的内容作为一个嵌入式Tweet,并通过Twitter的脚本渲染它,以便它看起来更好,更具有交互性?
发布于 2020-05-22 23:53:49
经过更多的研究后,我想出了答案,部分原因是这个问题:React: Embed tweet: Display text instead of tweet
我的解决方案是将Twitter嵌入脚本粘贴在我的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>然后调用useEffect中的Twitter小部件load() (如果使用类组件,则调用componentDidMount / componentDidUpdate ):
useEffect(() => {
if (window.twttr) {
window.twttr.widgets.load();
}
}, []);与另一个StackOverflow问题的主要区别是需要指定window.
编辑:添加一些建议,将if (window.twttr) {...}包含在useEffect中,因为有时候Twitter脚本没有加载(或者只是还没有完成加载),这就无缘无故地破坏了整个页面。
https://stackoverflow.com/questions/61965339
复制相似问题