React で動的 UI コントロールのクラス属性を条件付きで適用する方法

React でのクラス属性の条件付き適用

React は、特定の条件に基づいて要素にクラス属性を条件付きで適用する便利な方法を提供します。これにより、開発者はアプリケーションの状態に応じて UI 要素の外観や動作を動的に制御できます。

次のシナリオで、ボタン グループから渡されたブール プロパティに基づいて条件付きでボタン グループを表示または非表示にする場合を考えてみましょう。親コンポーネント:

<TopicNav showBulkActions={this.__hasMultipleSelected} />

親コンポーネントでは、__hasMultipleSelected 関数はアプリケーションの状態に応じて true または false を返します。次に、TopicNav コンポーネントの render メソッドで次のコードを使用して、クラス属性を条件付きで適用できます。

<div className={"btn-group pull-right " + (this.props.showBulkActions ? 'show' : 'hidden')}>
  <!-- Button group content -->
</div>

ただし、指定したコードでは、中括弧が文字列内に誤って配置されているため、適切な属性が適用されません。条件式の評価。正しい構文は次のとおりです。

<div className={"btn-group pull-right " + (this.props.showBulkActions ? 'show' : 'hidden')}>
  <!-- Button group content -->
</div>

文字列の外側に中かっこを配置すると、式 (this.props.showBulkActions ? 'show' : 'hidden') が最初に評価され、結果の文字列は、残りのクラス属性と連結されます。これは期待どおりに機能し、this.props.showBulkActions.

の値に基づいて条件付きでボタン グループを表示または非表示にします。

以上がReact で動的 UI コントロールのクラス属性を条件付きで適用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。