Props に基づいて React 要素を条件付きでレンダリングする方法: ボタン グループを使用した動的 UI のガイド

Props に基づいて React 要素を条件付きでレンダリングする

React では、親コンポーネントから渡されたデータに基づいて要素を条件付きで表示または非表示にすることが必要になることがよくあります。これにより、開発者は動的で応答性の高いユーザー インターフェイスを作成できます。

これが一般的な例の 1 つは、ボタン グループを扱う場合です。特定の条件が満たされた場合にのみボタンのグループを表示したい場合があります。たとえば、テーブル内で複数の項目が選択されている場合にのみ表示される「一括アクション」ボタン グループがあるとします。

これを実現するには、React の render メソッドで条件付きレンダリング構文を使用できます。一般的な形式は次のとおりです。

<code class="javascript">{this.props.showBulkActions ? <ElementToShow /> : null}</code>

この例では、this.props.showBulkActions は親コンポーネントから渡されるブール型プロパティです。 true の場合、コンポーネントがレンダリングされます。それ以外の場合、何もレンダリングされません。

ただし、提供されたコード スニペットでは、中括弧がクラス属性文字列内で誤って囲まれています:

<code class="javascript">className=&quot;btn-group pull-right {this.props.showBulkActions ? 'show' : 'hidden'}"></code>

これにより、React が式を適切に評価できなくなります。 。これを修正するには、次のように中かっこを文字列の外側に配置する必要があります。

<code class="javascript">className={"btn-group pull-right " + (this.props.showBulkActions ? 'show' : 'hidden')}></code>

さらに、無効なクラス名が作成されないように、「右にプル」の後にスペースがあることを確認してください。これらの調整により、ボタン グループは showBulkActions プロパティに基づいて条件付きで表示および非表示になるようになります。

以上がProps に基づいて React 要素を条件付きでレンダリングする方法: ボタン グループを使用した動的 UI のガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。