React dangerouslySetInnerHTML and script tag

React dangerouslySetInnerHTML and script tag

本文关键字：tag script and dangerouslySetInnerHTML React      更新时间：2023-09-26

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

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

它适用于"标准"的东西，如<p>, <div>等…

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

这是我从后端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>

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

你可以在script标签中读取src属性，用url做一个请求，然后加载eval()文本，但这是远远不推荐的。

你总是期望在html中出现相同的脚本标签吗?可能包括

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

相关文章：