> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# 条件付きレンダリング

> YiDAの「レンダリング条件」設定を使用し、変数バインディングでコンポーネントの表示・非表示を制御する方法を解説します。Reactの条件付きレンダリングと同等の効果を実現できます。

特定の条件下でのみコンポーネントをレンダリングしたい場面があります。これは React における以下のようなアプローチに似ています。YiDA では **レンダリング条件** という設定オプションが用意されており、変数バインディングを通じてコンポーネントの表示・非表示を簡単に制御できます。

```js theme={"theme":{"light":"github-light","dark":"github-dark"}}
function HelloText({showName, name}) {
	return (
  	<div>
    {showName && (<span>{name}</span>)} // showName を使用して名前テキストコンポーネントを表示するかどうかを判定
    </div>
  );
}
```

## 設定

各コンポーネントには、プレミアム属性の設定内に **レンダリング条件** 属性があり、コンポーネントの条件付きレンダリングを制御するために使用します。

デフォルトのレンダリング条件は true に設定されています。通常は、変数バインディングを使用してレンダリング条件属性を設定します。

<Tip>
  レンダリング条件が設定済みのコンポーネントは、アウトラインツリー内に分岐アイコンが表示され、そのコンポーネントにレンダリング条件属性が設定されていることを示します。
</Tip>

## ユースケース

ここでは、条件付きレンダリングの使い方をシンプルな例で説明します。

URL パラメータを通じてテキストコンポーネントの表示・非表示を制御します。URL パラメータに showName が存在する場合はコンポーネントを表示し、存在しない場合は表示しません。設定手順は以下のとおりです。

* 変数バインディングを使用して、テキストコンポーネントのレンダリング条件属性を設定します。

* テキストコンポーネントのレンダリング条件属性にグローバル変数 `state.urlParams.showName` をバインドし、URL パラメータに応じてテキストコンポーネントをレンダリングするかどうかを判定します。

最後に、以下のようにプレビューページで showName パラメータを設定することで、テキストコンポーネントの表示を制御できます（プレビューページの右上にある **新しいウィンドウで開く** をクリックすると、プレビューページをブラウザで直接開いてパラメータを設定できます）。

* showName パラメータなしの URL の場合：

* showName パラメータありの URL の場合：