跳到主要内容

使用 React

Docusaurus 内置了对 MDX 的支持,这让你可以在 Markdown 文档中编写 JSX 并渲染为 React 组件。

note

虽然 .md.mdx 文件都使用 MDX 进行解析,但某些语法的处理方式略有不同。为了获得最准确的解析和更好的编辑器支持,我们建议对包含 MDX 语法的文件使用 .mdx 扩展名。

试一试这段代码:

export const Highlight = ({children, color}) => (
<span
style={{
backgroundColor: color,
borderRadius: '2px',
color: '#fff',
padding: '0.2rem',
}}>
{children}
</span>
);
<Highlight color="#25c2a0">Docusaurus green</Highlight> and <Highlight color="#1877F2">Facebook blue</Highlight> are my favorite colors.
I can write **Markdown** alongside my _JSX_!

请注意,以下是 React 组件的标记和 Markdown 语法的渲染效果:

http://localhost:3000
Docusaurus green and Facebook blue are my favorite colors.

I can write Markdown alongside my JSX!


你也可以导入在其它文件夹中自定义的组件或通过 npm 安装的第三方组件!请查阅 MDX 文档,看看还可以使用 MDX 做哪些有趣的事情吧。

caution

由于所有文档都是使用 MDX 解析的,因此任何 HTML 都将被视为 JSX。因此,如果你需要内联组件的样式,请遵循 JSX 语法并使用样式对象。此行为不同于 Docusaurus 1。另请参见 从 v1 迁移到 v2