如何在ReactJS中渲染富文本？解决HTML标签显示问题

当你从后端获取到包含HTML标签的富文本数据（例如：const richText = '<p>Hello<strong> World</strong></p><p><strong>Next Line</strong></p>'），直接在JSX中插入会将HTML标签作为普通文本显示。要渲染成带格式的内容，可以使用React提供的dangerouslySetInnerHTML属性。

实现代码示例 #

import React from 'react';

function RichTextRenderer() {
  const richText = '<p>Hello<strong> World</strong></p><p><strong>Next Line</strong></p>';
  
  return (
    <div dangerouslySetInnerHTML={{ __html: richText }} />
  );
}

export default RichTextRenderer;

注意事项 #

• dangerouslySetInnerHTML的命名是为了提醒你：如果富文本内容来自不可信来源（比如未过滤的用户输入），可能会引发XSS攻击。务必确保数据来源安全，或提前完成XSS过滤处理。
• 类组件中用法一致，只需将该属性添加到目标<div>标签上即可。

内容的提问来源于stack exchange，提问作者Ibrahim Khalil