标签: dangerouslysetinnerhtml

我的 React 应用程序中有脚本，稍后会动态插入。脚本不加载。

在我的数据库中有一个名为 的字段content，其中包含包含 html 和 javascript 的数据。有很多记录，每个记录可以包含该content字段中的多个脚本。因此，在我的 React 应用程序中静态指定每个脚本 URL 并不是真正的选项。例如，记录的字段可能如下所示：

<p>Some text and html</p>\n<div id="xxx_hype_container">\n    <script type="text/javascript" charset="utf-8" src="https://example.com/uploads/hype_generated_script.js?499892"></script>\n</div>\n<div style="display: none;" aria-hidden="true"> \n<div>Some text.</div> \nEtc\xe2\x80\xa6\n

我使用以下命令在我的 React 应用程序中调用此字段dangerouslySetInnerHTML：

render() {\n    return (\n        <div data-page="clarifies">\n            <div className="container">\n                <div dangerouslySetInnerHTML={{ __html: post.content }} />\n                ... some other data\n            </div>\n        </div>\n    );\n}\n

它正确地从数据库加载数据并显示该数据的 html。但是，Javascript 不会被执行。我认为该脚本不起作用，因为它是稍后动态插入的。我怎样才能让这些脚本工作/运行？

这篇文章提出了动态插入脚本的解决方案，但我不认为我可以应用此解决方案，因为在我的情况下，脚本/代码是从数据库插入的（那么如何在nodeScriptReplace代码上使用...？）。有什么建议可以让我的脚本发挥作用吗？

更新回应 @lissettdm 他们的答案：

constructor(props) …

我有一系列存储在 MD 文件中的博客文章，其中一些包含脚本标签形式的多个 Gist 嵌入。

MD 内容通过危险的SetInnerHTML 呈现到页面，当页面被直接导航到时一切正常。但是，当使用应用程序的路由且未刷新整页时，脚本标记包含在标记中，但不会执行。

以下示例在此处使用默认 Next.JS 博客示例：https : //github.com/vercel/next-learn-starter/tree/master/basics-final。

降价：

---
title: "Example of GIST embedding"
date: "2020-02-20"
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id arcu at arcu pretium porta. Nam feugiat est ut lectus imperdiet venenatis. Ut tempus vitae lectus id vestibulum. Sed tristique est metus. Ut pretium malesuada risus. Maecenas eget diam tristique, sagittis velit ac, efficitur nisi. Quisque lectus lorem, vehicula at mi vitae, dapibus volutpat augue. …

我们有一个包含 HTML 代码的数据库，我们使用 React 将其显示在网页上，但需要对其进行解析。

我最初使用html-react-parser，但在代码审查后被要求使用危险的SetInnerHtml，因为它没有任何依赖项。

除了不使用危险的SetInnerHtml之外，我无法阐明使用 html-react-parser 的任何优点，但这是一个优点吗？如果是的话为什么？它是否以某种方式避免了危险，或者它们只是被隐藏起来了？

非常感谢，

凯蒂

我在几个地方读到，当我们使用 ReactdangerouslySetInnerHTML插入 html 片段时，脚本不会被执行。

不过我只是尝试插入这个：

<img src= "img.png" onload="alert('picture loaded')" alt="script test">  

并且警报被触发了。

这并不让我感到惊讶（这就是我首先进行测试的原因），但我想更好地理解“脚本不执行”的含义。

我的问题：

• 除了上面的示例之外，还有其他类型的脚本可以执行吗？
• 有没有办法完全阻止脚本执行，包括像我的示例中嵌入 html 事件处理程序中的脚本？
• 如果脚本标签定义了一个函数，该函数是否仍会被加载并可以在以后调用？
• 我应该注意的任何其他行为吗？

dangerouslySetInnerHTML[编辑]我在函数组件中使用：

const htmlString = '<img src="img.png" onload="alert('picture loaded')" alt="script test">'

在返回语句（JSX）中：

return <div dangerouslySetInnerHTML={{__html: htmlString}} />