高级 MDX 功能演示

这是一个更复杂和完整的 MDX 示例，展示了各种高级功能和组件。

动态组件示例

条件渲染示例

数据展示组件

图表组件模拟

代码高亮与交互

// 这是一个复杂的 React 组件示例
import React, { useState, useEffect } from 'react'

function ComplexComponent({ initialData }) {
  const [data, setData] = useState(initialData)
  const [loading, setLoading] = useState(false)

  useEffect(() => {
    // 模拟数据获取
    const fetchData = async () => {
      setLoading(true)
      try {
        // 模拟 API 调用
        await new Promise(resolve => setTimeout(resolve, 1000))
        setData(prev => [...prev, { id: Date.now(), name: 'New Item' }])
      } finally {
        setLoading(false)
      }
    }

    fetchData()
  }, [])

  return (
    <div className="complex-component">
      <h2>复杂组件示例</h2>
      {loading ? (
        <p>加载中...</p>
      ) : (
        <ul>
          {data.map(item => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      )}
    </div>
  )
}

数学公式支持

虽然原生 MDX 不直接支持 LaTeX，但我们可以通过自定义组件来实现：

响应式布局示例

总结

这个高级 MDX 示例展示了以下功能：

1. 交互式组件：计数器、切换按钮等
2. 条件渲染：根据状态显示不同内容
3. 数据展示：表格和图表组件
4. 代码高亮：展示复杂代码片段
5. 自定义组件：数学公式和卡片布局
6. 响应式设计：自适应网格布局
7. 状态管理：使用 React Hooks 管理组件状态

通过这些示例，我们可以看到 MDX 在创建丰富、交互式内容方面的强大能力。