条件付きレンダリング

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

設定

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

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

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

ユースケース

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

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

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

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

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

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

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

設定