Render 组件允许我们在页面上包含 "partial"（一种可重用的 Markdown 片段）。
它还接受可用作部分（partial）内变量的参数，以便即使在不同用法之间需要微小差异的内容也可以转换为部分（partial）。
import { Render } from "~/components";
<Render
file="simple-props"
product="style-guide"
params={{
name: "world",
}}
/>filestring这应该是部分（partial）的名称，不包含所在目录或文件扩展名。例如，
/partials/style-guide/hello.mdx将是file="hello"。productstring这应该是
src/partials内的文件夹。paramsobjectoptional如果您希望替换部分（partial）内的值，可以传递可在部分中引用的 params。请参阅属性。
在 Render 组件的 params 属性中定义的任何内容都可以在部分（partial）内部使用，使用 JavaScript 表达式 ↗。
为了防止遗漏必需的属性，任何依赖于 params 的部分（partial）都应在部分的 frontmatter 中定义 params。这应该是一个字符串数组，与您预期的属性名称匹配。如果属性是可选的，例如用于条件渲染内容，请在名称末尾添加 ?。
---
params:
- product
- deprecated?
---对于下面的每个示例，您可以打开下拉列表以查看部分（partial）的内容。
以下示例将渲染 Hello, world!。
simple-props.mdx
---
params:
- name
---
你好，{props.name}！import { Render } from "~/components";
<Render file="simple-props" product="style-guide" params={{ name: "world" }} />使用 JavaScript 表达式时，您现在处于 "JSX 内部"，无法使用传统的 Markdown 语法。同样，您不能在 Markdown 语法内部使用 JavaScript 表达式。
理想情况下，您不应在属性中使用 Markdown 语法，例如 **strong** or [text](link)。如果使用 JSX 不可行，可以使用接受 text 属性的 Markdown 组件。
MDX 文档 ↗包含了常见 Markdown 语法与其等效 JSX 元素的映射。
strong-in-props.mdx
---
params:
- dont
- do
---
**不要这样做！**
{props.dont}
**要这样做！**
<strong>{props.do}</strong>import { Render } from "~/components";
<Render
file="strong-in-props"
product="style-guide"
params={{ do: "Text", dont: "**Text**" }}
/>link-in-props.mdx
---
params:
- link
---
**不要这样做！**
这将链接到 `/style-guide/components/%7Bprops.link%7D`。
[Markdown 链接]({props.link})
**要这样做！**
这将链接到 `style-guide/components/render/#links`。
<p>
<a href={props.link}>JSX 链接</a>
</p>import { Render } from "~/components";
<Render
file="link-in-props"
product="style-guide"
params={{
link: "/style-guide/components/render/#links",
}}
/>image-in-props.mdx
---
params:
- image
---
**不要这样做！**
``
**请这样做！**
<img src={props.image} alt="Alt text" />import { Render } from "~/components";
<Render
file="image-in-props"
product="style-guide"
params={{ image: "/logo.svg" }}
/>code-in-props.mdx
---
params:
- code
---
import { Code } from "~/components";
#### 行内
**不要这样做！**
`{props.code}`
**请这样做！**
<p>
<code>{props.code}</code>
</p>
<hr />
#### 代码块
**不要这样做！**
```js
{
props.code;
}
```
**请这样做！**
<Code code={props.code} lang="js" />import { Render } from "~/components";
<Render
file="code-in-props"
product="style-guide"
params={{ code: "export const foo = 'bar';" }}
/>您可以在 JavaScript 表达式中表示的任何内容都可以用于您的条件逻辑中。
这可以是 与 (&&) 运算符 ↗ 或 三元 (? ... : ... ) 运算符 ↗，以下示例同时使用了这两者。
optional-props.mdx
---
params:
- product
- deprecated?
---
{
props.deprecated && (
<p>
<strong>
{props.product} 已弃用，请使用替代产品。
</strong>
</p>
)
}
{
props.product === "Thing Three" ? (
<p>欢迎来到我们的 Thing Three 发布倒计时！</p>
) : (
<p>欢迎来到 {props.product} 落地页。</p>
)
}import { Render } from "~/components";
<Render
file="optional-props"
product="style-guide"
params={{ product: "Thing", deprecated: true }}
/>
<hr />
<Render
file="optional-props"
product="style-guide"
params={{ product: "Thing Two" }}
/>
<hr />
<Render
file="optional-props"
product="style-guide"
params={{ product: "Thing Three" }}
/>