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リストを作ってくれる。

  1. string と number はそのまま使う
classNames('BFE', 'dev', 100) 
// 'BFE dev 100'
  1. 他のprimitiveは無視される
classNames(
  null, undefined, Symbol(), 1n, true, false
) 
// ''
  1. 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に従って実装してください。

エッジケースを網羅しよう。

(1)
(88)