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番目のパラメーターの意味は何ですか？
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]
コメントを追加