如何從 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." />