自定义组件与复用

引言

MDX 支持自定义 React 组件，并可在多个文档中复用，极大提升内容创作的灵活性和一致性。

核心思路

• 将常用 UI 或内容片段封装为独立组件
• 通过 import 语句在多个 MDX 文件中复用
• 支持 props 参数化，提升组件通用性

典型场景

• 统一风格的提示、警告、卡片等 UI 组件
• 可复用的交互式演示、图表、代码块
• 复杂内容片段（如 FAQ、步骤说明、引用）

示例代码

// components/Tip.jsx
import React from 'react';
export default function Tip({ type = 'info', children }) {
  const color = type === 'success' ? '#52c41a' : type === 'error' ? '#ff4d4f' : '#1890ff';
  return <div style={{ borderLeft: `4px solid ${color}`, padding: '8px 16px', margin: '8px 0', background: '#f6f8fa' }}>{children}</div>;
}

import Tip from './components/Tip.jsx'

# 复用自定义组件

<Tip type="success">操作成功！</Tip>
<Tip type="error">发生错误，请重试。</Tip>
<Tip>默认信息提示</Tip>

注意事项

• 组件建议统一放在 components/ 目录，便于管理
• 组件需大写字母开头，符合 React 规范
• 复用组件时可通过 props 灵活配置内容和样式
• 复杂组件建议拆分为更小的原子组件

总结

自定义组件与复用是 MDX 内容工程化的核心能力，能显著提升文档质量和开发效率。