React项目中Markdown字符串换行渲染失效问题求助

开发Markdown查看器与编辑器时，遇到API返回的Markdown字符串无法正确渲染换行符的问题：字符串中的\\n\\n无法被react-markdown解析为换行，尝试多种转义、样式调整及插件方案均无效，希望找到可行的解决办法，包括从API数据本身处理的可能。

示例数据与渲染效果 #

API返回的JSON示例 #

{
  "pages": [
    {
      "id": 1,
      "title": "Test Title",
      "body": "Lorem ipsum dolor sit amet.\\n\\nSed ut felis tempus, facilisis mi sed."
    }
  ]
}

当前渲染效果 #

Lorem ipsum dolor sit amet.\\n\\nSed ut felis tempus, facilisis mi sed.

期望渲染效果 #

Lorem ipsum dolor sit amet.

Sed ut felis tempus, facilisis mi sed.

已尝试的无效方案 #

• 使用双反斜杠、三反斜杠转义换行符
• 在句末添加两个空格模拟Markdown换行
• 使用 （日志显示字符串中存在但渲染无效果）
• 将换行符替换为<br>标签（直接打印标签文本而非实现换行）
• 尝试引入remark-breaks插件
• 给元素添加white-space: pre-wrap样式

当前代码实现 #

MarkdownRenderer组件 #

import ReactMarkdown from 'react-markdown'
//import remarkBreaks from 'remark-breaks'
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
import { nord, prism } from 'react-syntax-highlighter/dist/esm/styles/prism'
import remarkGfm from 'remark-gfm'
import {
    Paper,
    Table,
    TableBody,
    TableContainer,
    TableRow,
    TableHead,
    TableCell,
    Typography,
} from "@mui/material";
import { useDarkMode } from "@/context/DarkModeContext";

const CustomTableCell = ({ children }: any) => {
    return <TableCell sx={{ maxWidth: "100%", wordBreak: "break-word" }}>{children}</TableCell>
}

const TableComponent = ({ children }: any) => (
    <TableContainer component={Paper} sx={{ mt: 2 }}>
        <Table>{children}</Table>
    </TableContainer>
)
const TableBodyComponent = ({ children }: any) => (<TableBody>{children}</TableBody>)
const TableHeadComponent = ({ children }: any) => (<TableHead>{children}</TableHead>)
const TableRowComponent = ({ children }: any) => (<TableRow>{children}</TableRow>)
const TableDataComponent = ({ children }: any) => <CustomTableCell>{children}</CustomTableCell>
const TableHeaderComponent = ({ children }: any) => <TableCell component="th"><Typography fontWeight='bold'>{children}</Typography></TableCell>

const CodeComponent = (props: any) => {
    const { darkMode } = useDarkMode()

    const { children, className, node, ...rest } = props
    const match = /language-(\w+)/.exec(className || '')

    return match ? (
        <SyntaxHighlighter
            {...rest}
            lineProps={{ style: { wordBreak: 'break-all', whiteSpace: 'pre-wrap' } }}
            wrapLines={true}
            PreTag="div"
            style={darkMode ? nord : prism}
            language={match[1]}
        >
            {String(children).replace(/\n$/, '')}
        </SyntaxHighlighter>
    ) : (
        <code {...rest} className={className}>
            {children}
        </code>
    )
}

export default function MarkdownRenderer({ children }: Readonly<{ children: any }>) {
    return (
        <ReactMarkdown
            remarkPlugins={[remarkGfm]}
            components={{
                // Tables
                table: TableComponent,
                tbody: TableBodyComponent,
                thead: TableHeadComponent,
                tr: TableRowComponent,
                td: TableDataComponent,
                th: TableHeaderComponent,
                code: CodeComponent
            }}
        >
            {children}
        </ReactMarkdown>
    )
}

渲染调用代码 #

<MarkdownRenderer>
  { body }
</MarkdownRenderer>

补充怀疑点 #

观察DOM结构发现，整个Markdown内容被包裹在单个h1元素中，推测问题可能源于API返回的字符串未被正确解析，导致换行符无法被react-markdown识别。

解决思路 #

1. 处理API字符串的转义问题：API返回的\\n是双重转义后的换行符，需先转换为实际的\n。可在获取数据后执行：

   // 方法1：字符串替换
   const processedBody = body.replace(/\\\\n/g, '\\n');
   // 方法2：二次JSON解析（适用于双重转义场景）
   const processedBody = JSON.parse(`"${body}"`);
   

2. 正确启用remark-breaks插件：该插件可让单个\n转换为换行（符合Markdown标准的空行分段则无需插件）。修改组件配置：

   import remarkBreaks from 'remark-breaks'
   
   // 在ReactMarkdown中添加插件
   <ReactMarkdown
     remarkPlugins={[remarkGfm, remarkBreaks]}
     // ...其他配置
   >
     {processedBody}
   </ReactMarkdown>
   

3. 验证Markdown语法规范：确保处理后的字符串符合Markdown规则，比如两个连续\n会被解析为段落分隔，react-markdown会自动将段落渲染为<p>标签，实现自然换行。
4. 排查DOM结构异常原因：若内容被错误包裹在单个h1中，需检查原始Markdown字符串的语法，确保标题（如#）后有换行分隔后续内容，避免内容被误识别为标题的一部分。

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