Render コンポーネントは、再利用可能な Markdown スニペットである「パーシャル」をページに含めます。
パラメーターも受け取れます。パーシャル内の変数として使えるため、利用箇所ごとに少し違う内容でも、パーシャル化できます。
import { Render } from "~/components";
<Render
file="simple-props"
product="style-guide"
params={{
name: "world",
}}
/>-
filestringパーシャルの名前です。格納ディレクトリやファイル拡張子は含めません。たとえば
/partials/style-guide/hello.mdxはfile="hello"です。 -
productstringsrc/partials内のフォルダーです。 -
paramsobjectoptionalパーシャル内の値を差し替えたい場合は、パーシャルから参照できる params を渡せます。プロパティ を参照してください。
Render コンポーネントの params プロパティで定義した内容は、JavaScript 式 ↗ でパーシャル内から使えます。
必須プロパティの欠落を防ぐため、params に依存するパーシャルは、パーシャルのフロントマターでも params を定義してください。期待するプロパティ名と一致する文字列の配列にします。
---
params:
- product
---次の各例では、ドロップダウンを開くとパーシャルの内容を確認できます。
次の例は 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 式は使えません。
理想的には、プロパティと一緒に **strong** や [text](link) などの Markdown 構文は使いません。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/build-the-page/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/build-the-page/components/render/#links",
}}
/>image-in-props.mdx
---
params:
- image
---
**こうしないでください**
``
**こうします**
<img src={props.image} alt="代替テキスト" />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';" }}
/>