React文本转HTML标记：通用消息组件的现成解析方案咨询

你不需要自己编写解析逻辑，React生态里有成熟的现成方案，最适配的是react-markdown：

步骤1：安装依赖 #

执行以下命令安装库：

npm install react-markdown
# 或
yarn add react-markdown

步骤2：实现消息组件 #

直接引入库并使用，它会自动解析你传入的类Markdown文本（包括链接、粗体）：

import ReactMarkdown from 'react-markdown';

// 通用消息组件
const MessageComponent = ({ content }) => {
  return (
    <div className="message-container"> {/* 可添加自定义样式类 */}
      <ReactMarkdown>{content}</ReactMarkdown>
    </div>
  );
};

// 组件调用示例
<MessageComponent content='Lorem ipsum ["Link"](url) Lorem ipsum **Strong text**' />

为什么选react-markdown？ #

• 原生适配React，无需使用dangerouslySetInnerHTML，默认自带XSS防护
• 支持自定义渲染规则，比如给链接、粗体添加自定义样式，或替换为自己的业务组件
• 默认覆盖你需要的基础Markdown语法（链接、粗体、斜体等），如需扩展功能（如表格、任务列表），可配合remark-gfm插件实现

备选轻量方案 #

如果追求极致轻量，也可以用marked，但需手动处理React渲染并注意XSS防护：

import { marked } from 'marked';

const MessageComponent = ({ content }) => {
  const parsedHtml = marked.parse(content);
  return <div className="message-container" dangerouslySetInnerHTML={{ __html: parsedHtml }} />;
};

不过这种方式安全性和React适配性不如react-markdown，优先推荐前者。

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