做出危险的反应SetInnerHTML 和脚本标签答案

【问题标题】：React dangerouslySetInnerHTML and script tag做出危险的反应SetInnerHTML 和脚本标签
【发布时间】：2017-02-28 16:56:35
【问题描述】：

我正在构建一个用于处理远程 HTML 内容的 React 应用程序。

事实上，我们正在使用带有所见即所得东西的后台，所以我需要在我的 react 应用程序中检索它。

它适用于“标准”内容，例如 <p>、<div> 等...

实际上，我想基于 twitter 创建内容，例如在我的应用程序页面中嵌入推文时间线。

这是我从后端 API 获得的 HTML：

<div>
  <a class="twitter-timeline" href="https://twitter.com/twitterAccount">Tweets by Twitter Account</a>
  <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

没有比 twitter 提供的嵌入内容更多/更少的东西来实现这项工作。

当我尝试把它放进去时：

<div dangerouslySetInnerHTML={content}/>

它没有在屏幕上提供任何东西（除了链接），但没有提供时间线，就像如果（我确信是因为这个）脚本标签没有被执行。

但是，这些东西存在于我的 DOM 中，看起来像：

<div>
  <a class="twitter-timeline" href="https://twitter.com/user">Tweets by User</a><br>
  <script async="" src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

是否存在使该脚本执行的方法？

【问题讨论】：

标签： javascript reactjs twitter wysiwyg

【解决方案1】：

您可以读取脚本标签中的src 属性，使用url 发出请求并加载eval() 文本，但这远不推荐。

您是否总是期望相同的脚本标签出现在 html 中？也许包括

<script async="" src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

在您的页面中可以正常工作

【讨论】：