如何无需额外常量直接将Markdown作为Props传入Next.js 13组件

我正在开发Next.js 13应用，希望将Markdown内容直接通过markdownContent属性传入自定义的SectionTwoColumns组件，实现完全动态的内容渲染。目前尝试直接传入多行字符串或转义换行的字符串时，组件仅能解析第一行内容，只能通过定义额外常量存储Markdown的方式实现需求。期望实现类似以下的调用方式：

<SectionTwoColumns markdownContent="
# Title
Just a paragraph
**bold text**
" />

或：

<SectionTwoColumns markdownContent="# Title \n Just a paragraph \n **bold text**" />

解决方案 #

1. 确保组件正确解析Markdown内容 #

首先需要使用专业Markdown解析库（如react-markdown）处理传入的字符串，确保能识别换行、格式标记等语法。

安装依赖

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

调整SectionTwoColumns组件实现

如果使用Next.js 13的App Router，需要添加'use client'指令将组件标记为客户端组件（因为react-markdown依赖客户端渲染）：

'use client';
import ReactMarkdown from 'react-markdown';

export default function SectionTwoColumns({ markdownContent }) {
  return (
    <div className="your-section-styles">
      {/* 传入的markdownContent会被完整解析 */}
      <ReactMarkdown>{markdownContent}</ReactMarkdown>
    </div>
  );
}

2. 正确传入Markdown Props #

方案一：使用模板字面量传入多行内容

在JSX中，用模板字面量（`包裹）作为markdownContent的值，可完整保留换行和格式：

<SectionTwoColumns markdownContent={`
# Title
Just a paragraph
**bold text**
## Second Title
This is *italic text*
`} />

方案二：使用转义换行的单行字符串

如果需要将Markdown写在单行中，用\n表示换行，组件会正确解析这些换行符：

<SectionTwoColumns markdownContent="# Title \n Just a paragraph \n **bold text** \n ## Second Title \n This is *italic text*" />

关键说明 #

之前仅解析第一行的原因通常是：

• 未使用专业Markdown解析库，手动处理时未识别换行符；
• 直接用双引号包裹多行字符串时，JSX会自动忽略换行，导致所有内容被合并为一行，Markdown解析器无法识别分段。

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