#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 或 html 编写文档内容

export default () => {
  return (
    <p className="rp-doc">
      这是一段在 tsx 中的内容，不过样式和在文档中的样式一样，比如
      <code>@rspress/core</code>。 但是 含有 className="rp-not-doc" 的这段文字
      <code className="rp-not-doc">@rspress/core</code> 不会生效
    </p>
  );
};

它将被渲染为：