125. classNames()を実装する
シェアしよう
少し工夫が必要 - accepted / - tried
ReactではclassName
を使えば、CSS class nameをつけることができる、stringなので複数つけることもok:
<p className="classname1 classname2">
BFE.dev can help
</p>
もしclass nameが動的に生成されるときでは冗長化になりがち。
<p
className={`classname1 ${shouldAddClassname2 ? 'classname2' : ''}`}>
BFE.dev can help
</p>
この問題を解決するために、classnames は役に立つかも。
classNames()
では、任意の数の引数を受け取り、falsy valuesを除いて最終のclass nameリストを作ってくれる。
- string と number はそのまま使う
classNames('BFE', 'dev', 100)
// 'BFE dev 100'
- 他のprimitiveは無視される
classNames(
null, undefined, Symbol(), 1n, true, false
)
// ''
- Objectのpropertyはenumerable、keyがstring且つvalueがtruthyの場合残される。配列はflattenするべき。
const obj = new Map()
obj.cool = '!'
classNames({BFE: [], dev: true, is: 3}, obj)
// 'BFE dev is cool'
classNames(['BFE', [{dev: true}, ['is', [obj]]]])
// 'BFE dev is cool'
classNames()を実装してください。
注意
この問題の目的はオリジナルのpackgeをもう一度実装することではないので、上記のspecに従って実装してください。
関連するリスト
implement it by yourself