react的dangerouslySetInnerHTML属性里面的部分html标签设置不渲染

React中的`dangerouslySetInnerHTML`属性是一个特殊的HTML属性，用于将HTML字符串直接插入到DOM元素中。它的作用是在安全模式下允许开发者暂时绕过React的HTML转义规则，以便插入包含特殊字符、自闭合标签等未经过处理的原始HTML。

当你需要在组件内部插入一些特殊的HTML片段，例如用户输入的内容或者服务器返回的数据，而这些内容可能包含了不能被React安全解析的部分，如JavaScript脚本，这时可以使用`dangerouslySetInnerHTML`。

然而，这个属性存在潜在的安全风险，因为它可能导致跨站脚本攻击(XSS)。因此，只有在绝对必要且已确保数据安全的情况下才应使用，并且通常仅限于插入静态内容，尽量避免动态生成的HTML。

当某些标签设置不渲染，可能是因为它们不是React可以直接理解和渲染的标签。比如，`<script>`标签会默认被禁用，因为JavaScript可能会干扰应用程序的行为。如果你希望某些标签生效，可以在使用前检查它们是否被React禁用，然后手动创建对应的`<div>`或其他支持的标签包裹这些内容。

let unsafeHtml = { __html: '<b>This is bold text</b>' }; // 只有内联样式有效

<div dangerouslySetInnerHTML={unsafeHtml}></div>

相关问题

react如何阻止dangerouslySetInnerHTML里面的html标签渲染

在React中，`dangerouslySetInnerHTML`是一个特性，用于将HTML字符串直接插入到元素的innerHTML属性中，这可能会带来安全风险，因为用户输入的内容未经验证就可能执行恶意操作。如果你想要阻止某些标签渲染，你可以通过正则表达式过滤掉你不希望显示的标签，或者手动处理`dangerouslySetInnerHTML`返回的DOM元素。

下面是一种常见的做法：

const htmlString = '<div class="unwanted">...</div>';
// 使用正则表达式过滤标签
const allowedTags = ['a', 'img']; // 只允许这些标签
const sanitizedHtml = allowedTags.reduce((html, tag) => {
  const regex = new RegExp(`<${tag}(\\s[^>]*?)>(.*?)<\\/\\s*?${tag}>`, 'gi');
  return html.replace(regex, (_, before, content) => `<${tag}${before}>{content}</${tag}>`);
}, htmlString);

<div dangerouslySetInnerHTML={{ __html: sanitizedHtml }}></div>

这种方法并不能阻止所有可能的安全风险，特别是对于自闭合标签、属性注入等情况，还是需要谨慎处理。如果安全需求较高，建议使用专门的库，如`html-react-parser`，它会帮你更安全地解析HTML内容。

React dangerouslySetInnerHTML - 将HTML字符串解析为html样式显示

React中的`dangerouslySetInnerHTML`属性允许你将一个包含HTML标签和内容的字符串解析为HTML样式并显示在页面上。这个属性的使用是被认为是“危险”操作，因为它可以导致跨站脚本攻击（XSS攻击）。

使用`dangerouslySetInnerHTML`属性时，你需要传递一个对象，该对象包含一个`__html`属性，该属性的值是要显示的HTML字符串。例如：

function MyComponent() {
  const htmlString = "<h1>Hello, world!</h1>";
  return <div dangerouslySetInnerHTML={{ __html: htmlString }} />;
}

在上面的例子中，`MyComponent`组件将`htmlString`字符串解析为HTML样式，并将其显示在页面上。请注意，传递给`dangerouslySetInnerHTML`属性的对象应该只包含`__html`属性，不应该包含其他属性，因为这可能会导致安全漏洞。

需要注意的是，使用`dangerouslySetInnerHTML`属性时应该非常小心，只有在你知道你要渲染的HTML字符串是安全的情况下才应该使用它。否则，最好使用React提供的其他方法来渲染内容，例如使用`React.createElement`函数手动创建元素。