问题标签 [dangerouslysetinnerhtml]

我使用接收客户端输入的文本的组件，但是客户端碰巧输入了代码（例如 iframe），并且危险地 SetInnerHTML 让它呈现！我希望它在屏幕上显示代码（并且我已经尝试将其转换为字符串等）但不渲染它。

我有组件，并且我有来自 props 的带有 html 的字符串变量（例如）：

我如何在 JSX 中呈现 html 对吗？

是否有另一种方法可以在没有警告的情况下从道具呈现 html 字符串？

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

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

除了不使用 dangerouslySetInnerHtml 之外，我无法阐明使用 html-react-parser 的任何优势，但这是优势吗？如果是，为什么？它以某种方式避免了危险还是只是隐藏了？

非常感谢，

凯蒂

我目前正在尝试将包含 JSX 的字符串解析为文字 JSX，并将其注入到我的组件的返回中：

我正在使用create-react-app，我不打算弹出。

我尝试了以下方法：

1. dangerouslySetInnerHTML当检查我得到的元素时，这不起作用：

我该如何实现这一点，确保应用我的样式？

此外，内部 html<span/>标记是一个 Material-UI<Typography/>组件，我不得不更改它，因为<typography/>在使用这些包中的以下函数后，解析它会将组件名称更改为 :：

1. import parse from 'html-react-parser';
2. import ReactHtmlParser from 'react-html-parser';
3. import Parser from 'html-react-parser'

和以下构造dangerouslySetInnerHTML

我知道，在执行之前，我必须使用 Babel 之类的东西将 JSX 字符串转换/转换为 javascript 代码。

例如，使用浏览器版本的 Babel 时：

但是弹出和使用 Babel 对我来说不是一个选择。简而言之，我的问题是如何将字符串转换为 JSX 并确保应用了我的样式类？不使用babel可以吗？

(SOLVED, see answer below)

I want to add an image inside each accordion section and I've tried to use <img src={Image}/>. If that piece of code is placed as in the screenshot it works, but it's located outside of the < Accordion >.

If I move the code inside < Accordion > it stops working and I can't figure out exactly how to fix this. A thought was to somehow use image like {props.title} and {props.content} but could not get it to work.

Any suggestions?

code in component FirstAccordion.js

Accordion.js // component with the accordion logic

FirstAccordion.js // component in which I import accordion logic

我创建了一个显示招聘信息的 React 应用程序。当我单击列表中的职位发布时，会显示该特定职位发布的详细信息。

我正在尝试以与源代码相同的方式显示职位发布的正文。为此，我尝试使用以下代码：

但是，在渲染组件时，内容没有被格式化，而是以没有适当格式的纯文本显示。

这是一个尚未格式化的示例：

该词__"Application"__应为粗体，网站链接应为实际链接，“单击此处获取申请表”链接也应为实际链接。

我从 API 调用返回的数据与上面相同：

加入我们！- 我们期待您通过“申请”表提交申请 您的联系方式：Ralph Ullmann 电话：089/ 5511 333783 https://www.consorsfinanz.de/karrier 点击此处获取申请表！"

^^ 甚至在 StackOverflow 上也能正常工作！但我无法让它在我的应用程序中工作！

我已经把头发扯了几个小时试图解决这个问题，我什至不明白为什么它不起作用。

我在使用 React.js 时有一个问题

我从后端得到了一些字符串，我需要在我的 react jsx DOM 中输入它们

后端给了我这些字符串

我只想执行 DangerouslyInnerHTML

预期显示黄色框，但打印空元素

我应该怎么做才能解决这个问题？

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

MD 内容是通过 dangerouslySetInnerHTML 渲染到页面的，直接导航到页面时一切正常。但是，当使用应用程序的路由并且没有发生完整页面刷新时，脚本标记包含在标记中，但不会执行。

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

降价：

页

库函数

我也有一个回购显示这里的问题：https ://github.com/robearlam/gist-embedding-issue

干杯!

我需要用省略号显示评论。我使用了 antd 的 Paragraph Typography。我的问题是评论也可以包含 html 属性（链接到标记的用户），所以我还需要在组件中设置dangerouslySetInnerHTML。如何在 Typography 组件中设置它？

预览：

我尝试在 Paragraph 中使用 span 来使用dangerouslySetInnerHTML，但随后省略号开始为所有长评论显示“...更多”，而没有在评论中显示任何初始字符来填充宽度。在使用<Paragraph></Paragragh>字符串以外的任何 HTML 元素时也会收到警告

预览：

警告：

实现这一目标的任何解决方法？

当在反应中找到模式时，我试图在文本之间添加一个按钮标签，这是在 dangerouslySetInnerHTML 属性中完成的。onClick 仅适用于 alert() 和 console.log()，当我将函数传递给它时它不起作用。我错过了什么？