> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify-mintlify-add-hello-world-quickstart-48843.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 可复用代码片段

> 可复用的自定义代码片段，保持内容同步

软件开发的核心原则之一是 DRY（Don't Repeat Yourself，勿重复造轮子），这同样适用于文档。如果你发现在多个位置重复相同内容，就应创建自定义代码片段，以保持内容同步。

<div id="creating-a-custom-snippet">
  ## 创建自定义代码片段
</div>

**前置条件**：必须在 `snippets` 目录中创建代码片段文件，导入才能生效。

`snippets` 目录中的任何页面都会被视为代码片段，不会被渲染为独立页面。若你想从该代码片段创建一个独立页面，请将该代码片段导入到另一个文件中，并以组件方式调用。

<div id="default-export">
  ### 默认导出
</div>

1. 在代码片段文件中添加需要复用的内容。你也可以可选地添加变量，在导入代码片段时通过 props 进行填充。在此示例中，我们的变量是 word。

```typescript snippets/my-snippet.mdx
Hello world！这是我想在多个页面复用的内容。 
```

2. 将代码片段导入到目标文件中。

```typescript 目标文件.mdx
---
title: 我的标题
description: 我的说明
---

import MySnippet from '/snippets/path/to/my-snippet.mdx';

## 标题

这里是占位文本，用于展示排版效果。

<MySnippet/>

```

<div id="exporting-with-variables">
  ### 使用变量导出
</div>

1. 你也可以添加变量，并在导入该代码片段时通过 props 传入值。在此示例中，我们的变量是 word。

```typescript snippets/my-snippet.mdx
我今天的关键词是 {word}。
```

2. 使用该变量将代码片段导入到目标文件中。该属性会根据你的配置自动填充。

```typescript destination-file.mdx
---
title: 我的标题
description: 我的说明
---

import MySnippet from '/snippets/path/to/my-snippet.mdx';

## 标题

这是用于占位的示例文本。

<MySnippet word="bananas" />

```

<div id="reusable-variables">
  ### 可复用变量
</div>

1. 从代码片段文件中导出一个变量：

```typescript snippets/path/to/custom-variables.mdx
export const myName = 'my name';

export const myObject = { fruit: 'strawberries' };
```

2. 在目标文件中导入该代码片段，并使用该变量：

```typescript destination-file.mdx
---
title: 我的标题
description: 我的描述
---

import { myName, myObject } from '/snippets/path/to/custom-variables.mdx';

你好，我叫 {myName}，我喜欢 {myObject.fruit}。
```

<div id="jsx-snippets">
  ### JSX 代码片段
</div>

1. 从代码片段文件中导出一个 JSX 组件。（参见 [React 组件](/zh/react-components) 了解更多）：

```js icon=square-js snippets/my-jsx-snippet.jsx
export const MyJSXSnippet = () => {
  return (
    <div>
      <h1>你好，世界！</h1>
    </div>
  )
}
```

<Note>
  重要：在创建 JSX 代码片段时，请使用箭头函数语法（`=>`），不要使用函数声明。在此场景下不支持 `function` 关键字。
</Note>

2. 在目标文件中导入该代码片段并使用该组件：

```typescript destination-file.mdx
---
title: 我的标题
description: 我的说明
---

import { MyJSXSnippet } from '/snippets/my-jsx-snippet.jsx';

<MyJSXSnippet />
```