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内容。