Javascript 使用前端技术（如react）在网页中显示嵌入的社交数据

如何在reactjs中显示来自twitter的嵌入式社交数据，它已经有了脚本标记来设计和呈现twitter，并在数据库表中硬编码了一些内容？在整体式站点中，它运行良好。基于它的前端不工作

例如，以文本形式存储在db表中的内容：

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">I just published “Making Sense of React Hooks” <a href=""></a></p>&mdash; Dan Abramov (@dan_abramov) <a href="https://twitter.com/dan_abramov/status/1057319198626594816?ref_src=twsrc%5Etfw">October 30, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着包括Lorem Ipsum版本的Aldus PageMaker等桌面出版软件的发布而流行

我刚刚出版了《让React hook变得有意义》

&mdash；丹·阿布拉莫夫（@Dan_Abramov） Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着包括Lorem Ipsum版本的Aldus PageMaker等桌面出版软件的发布而流行

---

当使用react时，此脚本twitter不会加载默认的小部件布局，并将其周围的一些段落作为硬编码内容。

问题在于脚本标记。您可以直接将其添加到index.html，也可以像这样使用

componentDidMount

componentDidMount () {
     const script = document.createElement("script");

     script.src = "https://platform.twitter.com/widgets.js";
     script.async = true;

     document.body.appendChild(script);
}

---

选中此项，或者您可能希望选中此项

，即需要从页面中删除每个硬编码脚本标记，并通过componentDidMount或将其添加到head中进行替换。如果它不仅仅与twitter相关，也不会让事情变得复杂。然后，在这种情况下，需要扫描整个硬编码内容，将其从那里移除并添加到头部。这肯定会让事情变得更糟一个旧的单一网站有很多页面和很多页面浏览量，需要转移到今天的前端世界，在那里一切都可以复制粘贴，并将工作良好。这将导致大量的后端处理。