#MDX 和 React 组件

#组件化

在 MDX 中，所有 .mdx 文件都会编译为 React 组件，这意味着它们可以被当做 React 组件使用，也可以自由使用 React 组件。例如：

import MdxFragment from './_mdx-fragment.mdx';
import TsxComponent from './_tsx-component';

测试 MDX 片段和 React 组件的使用。

<MdxFragment />

<TsxComponent />

它将被渲染为：

你可以在 .mdx 文件中使用 Rspress 提供的 内置组件 或安装一些 React 组件库来丰富你的文档。

#路由约定

在 docs 目录 中，使用 MDX 片段或 React 组件要通过 route.exclude 配置从路由中排除。为了使用方便，我们约定以 "_" 开头的文件会被默认排除，通过 route.excludeConvention。

你也可以将组件放到 docs 目录以外的相邻目录，例如：

import ButtonFragment from './_button.mdx';
import Button from '../../components/button';

<ButtonFragment />
<Button />

它将被渲染为：

#逃生舱：TSX 组件中使用 MDX 样式

import { getCustomMDXComponent } from '@theme';

export default () => {
  const { code: Code, p: P } = getCustomMDXComponent();
  return (
    <P>
      这是一段在 tsx 中的内容，不过可以使用<Code>代码块</Code>样式。
    </P>
  );
};

它将被渲染为：