MDX 作用域与 context

引言

在复杂的 MDX 文档中，组件之间常常需要共享数据或状态。MDX 支持通过 React context 机制实现作用域内的数据传递和全局配置。

核心概念

• 作用域（Scope）：指 MDX 文件渲染时可访问的变量、组件和 context。
• context：React 的 context API，可用于在组件树中跨层级传递数据。
• MDXProvider：@mdx-js/react 提供的组件，用于全局注册自定义组件和 context。

典型场景

• 全局主题、样式、国际化配置
• 组件间共享用户信息、权限、设置等
• 动态切换组件渲染逻辑

示例代码

// context/theme.js
import React, { createContext, useContext } from 'react';
export const ThemeContext = createContext('light');
export const useTheme = () => useContext(ThemeContext);

// components/ThemeDemo.jsx
import React from 'react';
import { useTheme } from '../context/theme';
export default function ThemeDemo() {
  const theme = useTheme();
  return <div>当前主题：{theme}</div>;
}

// App.jsx
import React from 'react';
import { ThemeContext } from './context/theme';
import ThemeDemo from './components/ThemeDemo.jsx';
import Content from './content.mdx';
export default function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Content components={{ ThemeDemo }} />
    </ThemeContext.Provider>
  );
}

content.mdx

# context 用法示例

<ThemeDemo />

注意事项

• context 需在 React 组件树的高层包裹，确保所有子组件可访问
• 通过 MDXProvider 注册的组件可自动获得 context
• 不建议在 MDX 文件中直接创建 context，推荐在独立模块中定义

总结

MDX 结合 React context 能力，实现了组件间高效的数据共享和全局配置，是构建复杂交互文档的关键。