在使用react等前端技术时，在网页中显示嵌入的社交数据

Question

如何在reactjs中显示来自twitter的嵌入式社交数据，该reactjs已经有了脚本标记，可以在适当的位置对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

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

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