javascript - 使用 React 等前端技术在网页中显示嵌入的社交数据

Question

如何在reactjs中显示来自twitter的嵌入社交数据，该脚本标签已经用于样式化和渲染twitter并在数据库表中硬编码一些内容？在整体网站中，它工作得很好。在基于它的前端不起作用。

例如，以文本形式存储在数据库表中的内容:

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

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

Answer 1

问题出在脚本标记中。您可以直接将其添加到index.html或使用componentDidMount像这样

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

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

     document.body.appendChild(script);
}

检查这个Jsfiddle或者您可能想检查这个 npm package