如何为Strapi富文本区块内容类型添加自定义React组件？

1. 在Strapi后台定义自定义区块类型 #

首先需要在Strapi的内容类型编辑器中，为富文本字段添加自定义区块：

• 打开目标内容类型的编辑页面，找到目标富文本字段
• 进入「Blocks」配置面板，点击「Add a block」
• 设置区块的类型标识符（比如custom-callout，这个标识要和前端解析时的key完全一致）
• 添加该区块需要的字段，比如文本类型的title、富文本类型的description、枚举类型的variant（用于区分样式，如success/warning）

2. 编写对应的自定义React组件 #

根据Strapi后台定义的字段结构，编写前端要渲染的组件：

// components/Callout.jsx
export default function Callout({ title, description, variant }) {
  const variantClass = `callout-${variant}`;
  return (
    <div className={`callout ${variantClass}`}>
      {title && <h3>{title}</h3>}
      <div>{description}</div>
    </div>
  );
}

3. 配置blocks-react-renderer的自定义解析器 #

使用blocks-react-renderer时，通过renderers属性将自定义区块类型映射到你的React组件：

import { BlocksRenderer } from '@strapi/blocks-react-renderer';
import Callout from './components/Callout';

// 示例：从Strapi API获取的富文本blocks数据
const strapiBlocksData = [
  {
    type: 'paragraph',
    children: [{ text: '这是一段普通段落文本' }],
  },
  {
    type: 'custom-callout',
    title: '重要提示',
    description: [{ type: 'paragraph', children: [{ text: '这是自定义提示框的内容' }] }],
    variant: 'warning',
  },
];

export default function PageContent() {
  return (
    <BlocksRenderer
      content={strapiBlocksData}
      renderers={{
        // 映射自定义区块类型到组件
        'custom-callout': (props) => (
          <Callout
            title={props.title}
            description={<BlocksRenderer content={props.description} />}
            variant={props.variant}
          />
        ),
        // 可选：重写默认区块的渲染逻辑，比如给默认段落加自定义样式
        // paragraph: (props) => <p className="custom-paragraph">{props.children}</p>,
      }}
    />
  );
}

关键注意点 #

• 自定义区块的type值必须和Strapi后台设置的类型标识符完全匹配
• 如果自定义区块内部包含嵌套的富文本内容（比如示例中的description），需要在组件内部再次调用BlocksRenderer来解析嵌套内容
• renderers对象支持同时覆盖Strapi默认的区块渲染逻辑，满足个性化样式需求

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