根据Props.Children中的值进行条件样式

Question

我在div中有props.children。 div有className = "tags"。如果没有从父级传递的值，我想向dnone添加另一个className div。如果未传递任何值，如何有条件地向该div添加类？

Answer 1

您可以使用简单的ternary operator来解决它：

  <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>

这是如何工作的：将始终显示class标签，并且仅在没有子代的情况下才会显示 dnone 类。

简单地说：

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