レンダー

Renderコンポーネントを使用すると、ページに「部分」、再利用可能なMarkdownスニペットを含めることができます。

また、部分内で変数として使用できるパラメータを受け入れるため、使用間でわずかな違いが必要なコンテンツも部分に変換できます。

コンポーネント

Hello, world!

Hello {props.name}

Hello world

link (href=“%7Bprops.link%7D”)

link (href=“/style-guide/components/render/“)

import { Render } from "~/components"

<Render file="hello" params={{
    name: "world",
    link: "/style-guide/components/render/"
}} />
{/*
こんにちは、{props.name}！

こんにちは `{props.name}`

こんにちは <code>{props.name}</code>

[リンク]({props.link})

<a href={props.link}>リンク</a>
*/}

入力

file string: これは部分の名前で、含まれるディレクトリやファイル拡張子なしで指定する必要があります。 例えば、/partials/style-guide/hello.mdxはfile="hello"となります。

product string (オプション): デフォルトでは、現在のページと同じ製品フォルダ内の部分を探します。 これを使用して異なる製品を指定できます。

params object (オプション): 部分内で値を置き換えたい場合、部分内で参照できるparamsを渡すことができます。 paramsを参照してください。

部分

部分には1つのオプションのフロントマタープロパティ、すなわちparamsがあります。これは期待されるパラメータの配列を取ります。 これが定義されているが、そのパラメータが渡されていない場合、エラーが発生します。

/src/content/partials/style-guide/hello.mdx

---
params:
    - name
---

こんにちは、{props.name}!

パラメータ

上記の例では、次のことに気付くでしょう：

1. Renderコンポーネントのparams入力
2. フロントマター内のparamsプロパティ
3. props.nameへの参照

入力

Renderコンポーネントのparams入力を使用する際、JavaScriptオブジェクト ↗を記述でき、 これは後で部分内で利用可能になります。

フロントマター

部分のparamsフロントマタープロパティは、“期待されるパラメータ”を含む文字列の配列を期待します。これは、部分がパラメータを渡す必要がある場合に、何も渡されなかった場合にユーザーに警告できるようにするためです。

プロパティ

これらのパラメータにアクセスする方法は、波括弧{}で囲まれたpropsオブジェクトを使用することです。 これはMDX内のJavaScript式 ↗です。