React で条件付きクラス レンダリングを正しく実装するにはどうすればよいですか?

React でのクラス属性の条件付きレンダリング

React では、親コンポーネントから受け取った props に基づいて要素を条件付きで表示または非表示にするのが一般的です。使用事例。指定されたコード スニペットでは、作成者は showBulkActions プロパティの値に基づいてボタン グループを非表示または表示することを目的としています。

問題は、条件付きレンダリングに使用される中括弧 { } が文字列内に囲まれていることです。 className 属性。これにより、文字列全体が静的な値として解釈されるため、実際の条件付きレンダリングは行われません。

解決策:

プロップに基づいてクラス属性を条件付きで適用するには、中括弧を使用します。文字列の外側に配置して、論理条件を囲み、クラス名を決定する必要があります。次のコードは、正しいアプローチを示しています。

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

説明:

• className は中括弧で囲まれています。
• 論理条件 (this.props.showBulkActions ? 'show' : 'hidden') は次のように評価されます。 this.props.showBulkActions が true の場合は「show」、false の場合は「hidden」です。
• 「pull-right」の後のスペースにより、「pull-rightshow」が意図せずクラスとして適用されなくなります。
• 三項を適切に評価するには括弧が重要ですexpression.

これらの修正に従うことで、ボタン グループは親コンポーネントの showBulkActions プロパティに基づいて条件付きで表示または非表示になるようになります。

以上がReact で条件付きクラス レンダリングを正しく実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。