Условный стиль в соответствии со значениями в Props.Children

Question

У меня div с props.children. Это div имеет className = "tags". Если от родителя не переданы значения, я хочу добавить еще одно имя класса dnone к div. Как условно добавить класс к этому div, если значение не передано?

Answer 1

Вы можете решить это с помощью простого троичного оператора :

  <div className={this.props.children ? 'tags' : ''}> ... </div>

Answer 2

Этого можно добиться с помощью пакета classnames.

import classNames from 'classnames'
...

const cls = classNames({tags: true, dnone: !props.children })

<div className={cls}> ... </div>

Как это работает: тег класса будет присутствовать всегда, а класс dnone будетприсутствует только при отсутствии детей.

Простыми словами:

classNames({
  classA: true,
  classB: true,
  classC: false // this class is going to be excluded
})