如何从 React 中的文本呈现特定的 HTML 标签？

Question

我有一个来自我的服务器的动态文本，其中包含一些 HTML 标记。 由于安全原因，我不想“dangerouslySetInnerHTML”，因为我只想允许特定的 html 标签，如<i> <b> <strong> <em> 。 我不想让任何其他标签被渲染，例如或

所以假设我有以下字符串

This is a text with a <b>bold</b> tag and a <strong>strong</strong> tag. It also includes <i>italic</i> and <em>em</em> tags.

如果我呈现这个文本，我想在我的 HTML 中呈现它：

这是一个带有粗体标签和强标签的文本。 and em tags.它还包括和em标签。

Answer 1

我通过使用dompurify库解决了这个问题，并在 React 中创建了一个可重用的组件。

html-tag-renderer.js

import React from 'react';
import DOMPurify from 'dompurify';
import PropTypes from 'prop-types';

const HTMLTagRenderer = ({ string, allowedTags }) => {
  const cleanHTML = DOMPurify.sanitize(string, { ALLOWED_TAGS: allowedTags });

  return <div dangerouslySetInnerHTML={{ __html: cleanHTML }} />;
};

HTMLTagRenderer.propTypes = {
  string: PropTypes.string.isRequired,
  allowedTags: PropTypes.array.isRequired,
};

export default HTMLTagRenderer;

可以像这样使用：

 <HTMLTagRenderer allowedTags={['b', 'em', 'strong', 'i']} string="This is a text with a <b>bold</b> tag and a <strong>strong</strong> tag. It also includes <i>italic</i> and <em>em</em> tags." />