Reactでclsxを使用する方法

ミルポート:

Reactのコンポーネントにクラス名を割り当てる際のclsxのいくつかの使用法を理解しようとしています。

構成

className={clsx(classes.menuButton, open && classes.hide)} 

十分に明確です。「classes.menuButton」を適用し、ブール値「open」の値がtrueの場合は「classes.hide」も適用します。

私の質問は、この2番目の例に関連しています。

className={clsx(classes.appBar, {[classes.appBarShift]: open })}

これにより、「classes.appBar」が適用されます。しかし、2番目のパラメーターの意味は何ですか?

Dupocas:

clsx 与えられた条件を適用するために一般的に使用されます className

この構文は、特定の条件が次のように評価された場合にのみ適用されるクラスがあることを意味します true

const menuStyle = clsx({
    [classes.root] : true, //always apply
    [classes.menuOpen] : open //only when open === true
})

この例[classes.menuOpen](のように評価されるrandomclassName123)では、次の場合にのみ適用されますopen === true


clsx基本的にstring補間を実行するのでクラスを条件付きで適用するために必ずしもそれを使用する必要はありません。公式ドキュメントで確認できる多くのサポートされている構文があります

の代わりに

<div className={`${classes.foo} ${classes.bar} ${classes.baz}`} />

こんな風に使えます

const { foo, bar, baz } = classes
const style = clsx(foo, bar, baz)

return <div className={style} />

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

TOP 一覧

  1. 1

    sql-ORA-00937:単一グループのグループ関数ではありません

  2. 2

    Powershellを使用して管理者として実行ショートカットを作成する方法

  3. 3

    GolangがHTTPリクエストFormFileをAmazon S3にアップロードする

  4. 4

    AWS S3 SDK-スレッドプールサイズを設定するにはどうすればよいですか?

  5. 5

    Reactでclsxを使用する方法

  6. 6

    Ansibleで複数行のシェルスクリプトを実行する方法

  7. 7

    SwiftでURLが有効かどうかを確認するにはどうすればよいですか?

  8. 8

    DatabaseError:ORA-00928:SELECTキーワードがありません

  9. 9

    セレンのモデルダイアログからテキストを抽出するにはどうすればよいですか?

  10. 10

    Azure Logic Apps:PowershellスクリプトまたはAzure CLIを実行する方法は?

  11. 11

    Eclipseをアンインストールする方法?

  12. 12

    React:Rootクラスの条件付きレンダリングが機能しませんでした

  13. 13

    レンダリング後のdivの動的幅の取得

  14. 14

    Microsoft Edge WebブラウザでJavaを有効にするにはどうすればよいですか?

  15. 15

    TestInitメソッドでHttpContext.Currentをモックします

  16. 16

    SeleniumとPythonを使用してdiv内の値を見つける方法

  17. 17

    シェープファイルからTopojsonへの変換

  18. 18

    std :: binary_functionの置き換え

  19. 19

    Open Weather Map APIによって提供されるJSON天気予報を明確にする方法は?

  20. 20

    マルチレベルのグループ化でHTMLテーブルにデータを表示する

  21. 21

    「java.library.pathにocijdbc11がありません」SQLDeveloperエラーの対処方法

ホットタグ

アーカイブ