问题标签 [dangerouslysetinnerhtml]

应用程序正在从服务器接收 HTML 文件。

该数据（responseToPost）可以像这样显示在页面上：

我想知道是否可以创建一个新的 URL 来显示这些数据？

html 文件具有以下格式：

我希望创建的页面像：localhost:3000/my-title并在该页面上显示 HTML。

有可能吗？我应该使用什么方法？

我通过 Gatsby 从 CMS 中获取内容。标记内部有占位符，应该用 React 元素替换。

所以我得到这样的东西：

在 React 中我想把它改成这样（工具提示的标记来自 React 元素）：

带有替换元素的最终 html 应该使用危险的 SetInnerHTML 转储到 DOM 中。

我尝试使用react-string-replace：

但它给了我一个包含字符串和 React 元素混合的数组，这些元素在不破坏 HTML 结构的情况下无法连接。

解决这个问题的好方法是什么？还是我在 CMS 中完全使用占位符是错误的？

我正在开发一个网站，我想将外部 HTML 嵌入到我的网页中。所以我使用 iframe 尝试了以下方法，但它只显示一个没有内容的空白页面

我还使用了另一种实现 innerHTML 的方法：

但结果看起来像这样： 有谁知道如何解决这个问题？谢谢！

我试图在 JSX 中包含一个“上下文组件”，我做错了什么？

请注意，我需要运行脚本，因此不提供危险的 SetInnerHTML 选项。另外我想构建一个函数组件以与钩子一起使用。

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

但是我只是试图插入这个：

并触发了警报。

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

我的问题：

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

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

在返回语句（JSX）中：

我需要在 div 之间显示内部 html 和内容。我需要innerHTML 中的一条消息，即notification.message 和tag.button 之间的按钮内容对于所有动态消息都应该相同。这是关闭按钮。我需要动态更改消息并保持关闭按钮不变，而不是重复关闭按钮。请帮我这样做...

我想转换

当我试图在下面的代码中进行转换时，我没有关闭按钮，只有内容被呈现。

我认为使用 React 的dangerouslySetInnerHTML属性将从服务器获取的标记放置在页面上是很常见的，即

如果这是另一种情况，并且标记来自页面上的表单，这显然会带来风险，因为您无法信任表单上输入的数据，而且我们不会在此处进行任何清理。

但是，我们将从服务器返回的数据放在页面上，因此可能存在某种程度的信任。对服务器的调用发生在代码中，大概我们知道我们正在调用的 API。

但是，即使我们信任服务器，考虑来自受信任服务器的数据实际上是不明智的吗？在数据返回之前，不良行为者可以干预网络吗？

我希望在 react html markdown 实现的第二段之后附加一个按钮。我目前正在使用 react-markdown 来编译我的 html 代码。我在这里尝试做的几件事：

1. 获取 react markdown html 的第 n 个元素（例如：p:2nd-child）
2. 创建新元素（例如：document.createElement('button')）
3. 在 (p:2nd-child) 元素之后附加新按钮

我应该使用 ref 来实现这一点，还是像附加纯 JavaScript 一样简单？如果有更好的解决方案，请接受其他建议。

索引.jsx

我正在寻找一种使用 useInView 钩子添加出现动画的方法。问题是我的代码中没有我需要的标签，我通过危险的SetInnerHTML 从第三方Ghost 作为一个标签获得它。

dangerouslySetInnerHTML={{__html: props.post.html}}/>

有没有办法以 React 方式做到这一点？

嗨，我有一个场景，我需要在元素中添加来自服务器的 HTML 内容，并用蓝色设置电子邮件地址的样式。

来自服务器的 HTML 内容::

我在前端的 DIV 标记中设置此内容，如下所示：

我想让电子邮件地址变成红色。

我怎样才能做到这一点 ？