React获取Strapi富文本后如何保留原格式渲染？

Strapi的富文本字段主要分两种存储格式，你遇到的问题核心是没匹配正确的解析方式，以下分场景给出解决方案：

场景1：Strapi字段为Markdown格式 #

如果你的字段设置的是Markdown类型，需要先把Markdown文本转成HTML再渲染，直接用dangerouslySetInnerHTML无效是因为未做解析：

1. 安装Markdown解析库（二选一即可）：

npm install react-markdown
# 或者
npm install marked

2. 使用react-markdown渲染示例：

import ReactMarkdown from 'react-markdown';
import { useState, useEffect } from 'react';
import axios from 'axios';

function MarkdownContent() {
  const [markdownText, setMarkdownText] = useState('');

  useEffect(() => {
    axios.get('/api/your-target-endpoint')
      .then(res => setMarkdownText(res.data.attributes.your-markdown-field))
      .catch(err => console.error(err));
  }, []);

  return <div><ReactMarkdown>{markdownText}</ReactMarkdown></div>;
}

3. 使用marked渲染示例：

import { marked } from 'marked';
import { useState, useEffect } from 'react';
import axios from 'axios';

function MarkdownContent() {
  const [htmlContent, setHtmlContent] = useState('');

  useEffect(() => {
    axios.get('/api/your-target-endpoint')
      .then(res => setHtmlContent(marked.parse(res.data.attributes.your-markdown-field)))
      .catch(err => console.error(err));
  }, []);

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

场景2：Strapi字段为原生Rich Text格式 #

如果是Strapi自带富文本编辑器生成的JSON结构内容（非纯Markdown），需要用官方解析库：

1. 安装官方解析库：

npm install @strapi/rich-text-react-renderer

2. 渲染示例：

import { RichTextRenderer } from '@strapi/rich-text-react-renderer';
import { useState, useEffect } from 'react';
import axios from 'axios';

function StrapiRichTextContent() {
  const [richTextData, setRichTextData] = useState(null);

  useEffect(() => {
    axios.get('/api/your-target-endpoint')
      .then(res => setRichTextData(res.data.attributes.your-rich-text-field))
      .catch(err => console.error(err));
  }, []);

  if (!richTextData) return <div>加载中...</div>;

  return <RichTextRenderer content={richTextData} />;
}

关键排查点 #

• 先确认Strapi后台的字段类型：是「Markdown」还是「Rich Text」，对应选择上述方案。
• 检查接口返回的字段路径是否正确，比如是否漏取了data.attributes层级下的目标内容。
• 如果用dangerouslySetInnerHTML无效，说明你传入的不是HTML字符串，而是未解析的Markdown或JSON结构。

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