Strapi CMS返回的Markdown字段在Gatsby 2.x前端无法格式化求解决方法

方案1：使用兼容Gatsby 2.x的旧版react-markdown #

Gatsby 2.x依赖的React版本通常为16.x，而react-markdown v6+要求React 17+，因此可以锁定v5.x版本解决兼容性问题：

1. 安装指定版本

npm install react-markdown@5.0.3
# 或用yarn
yarn add react-markdown@5.0.3

2. 在组件中使用

import ReactMarkdown from 'react-markdown'

const Post = ({ data }) => {
  return (
    <div className="post-content">
      <ReactMarkdown source={data.strapiPost.markdownContent} />
    </div>
  )
}

export default Post

方案2：使用remarkable库直接转HTML渲染 #

remarkable是轻量的Markdown解析库，兼容性强，适配Gatsby 2.x环境：

1. 安装依赖

npm install remarkable
# 或用yarn
yarn add remarkable

2. 组件中实现解析

import { Remarkable } from 'remarkable'

const md = new Remarkable()

const Post = ({ data }) => {
  const htmlContent = md.render(data.strapiPost.markdownContent)
  return (
    <div 
      className="post-content"
      dangerouslySetInnerHTML={{ __html: htmlContent }}
    />
  )
}

export default Post

注意：使用dangerouslySetInnerHTML时需确保Strapi返回的Markdown内容可信，避免XSS风险。

方案3：在Gatsby构建阶段预处理Markdown为HTML #

通过Gatsby的Node API在构建时将Markdown转换为HTML，前端直接渲染处理后的内容：

1. 安装依赖

npm install remark remark-html
# 或用yarn
yarn add remark remark-html

2. 修改gatsby-node.js，在onCreateNode中处理数据

const remark = require('remark')
const html = require('remark-html')

exports.onCreateNode = async ({ node, actions }) => {
  const { createNodeField } = actions
  // 根据你的数据结构调整节点类型判断条件
  if (node.internal.type === 'StrapiPost') {
    const processedContent = await remark()
      .use(html)
      .process(node.markdownContent)
    const htmlContent = processedContent.toString()
    // 添加新字段存储转换后的HTML
    createNodeField({
      node,
      name: 'htmlContent',
      value: htmlContent,
    })
  }
}

3. 在页面查询中获取预处理后的HTML字段

query PostQuery($id: String!) {
  strapiPost(id: { eq: $id }) {
    id
    title
    fields {
      htmlContent
    }
  }
}

4. 组件中渲染HTML

const Post = ({ data }) => {
  return (
    <div 
      className="post-content"
      dangerouslySetInnerHTML={{ __html: data.strapiPost.fields.htmlContent }}
    />
  )
}

export default Post

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