条件レンダリング

場合によっては、特定の条件下でのみコンポーネントをレンダリングしたい場合があります。Reactでの以下の記述方法に似て、宜搭はレンダリングの有無の構成項目を提供し、変数バインディングを通じてコンポーネントの表示・非表示を簡単に制御できます：

function HelloText({showName, name}) {
	return (
  	<div>
    {showName && (<span>{name}</span>)} // showNameによってnameテキストコンポーネントを表示するかどうかを判断
    </div>
  );
}

構成

各コンポーネントの高度な属性設定にはレンダリングの有無属性があり、コンポーネントの条件レンダリングを制御します。

デフォルトではレンダリングの有無の構成値はtrueです。通常、変数バインディング方式を使用してレンダリングの有無属性を設定します。

ヒント

レンダリングの有無を構成したコンポーネントは、アウトラインツリーに分岐用の小さなアイコンを表示して、コンポーネントにレンダリングの有無属性が設定されていることを示します：

使用シナリオ

次に簡単な例を使って、条件レンダリングの使用方法を説明します。

URLパラメータを使用してテキストコンポーネントの表示・非表示を制御します。URLパラメータにshowNameパラメータが存在する場合は表示し、それ以外の場合は表示しないようにします。以下のように構成します：

• 変数バインディング方式を使用してテキストコンポーネントのレンダリングの有無属性を設定：
• テキストコンポーネントのレンダリングの有無属性にグローバル変数state.urlParams.showNameをバインドして、URLパラメータに基づいてテキストコンポーネントをレンダリングするかどうかを判断：

最後に、プレビューページでshowNameパラメータを設定することでテキストコンポーネントの表示を制御できます（プレビューページ右上隅の新規ウィンドウで開くを使用してブラウザでプレビューページを直接開き、パラメータを設定できます）：

• URLにshowNameパラメータがない場合：
• URLにshowNameパラメータがある場合：