使用hide show classname切换react组件

Question

我正在使用这个npm https://www.npmjs.com/package/classnames

<ul className={classnames('hide', {'show': props.openFilter, 'hide': !props.openFilter} )}>
</ul>

我执行this.setState({openFilter: !this.state.openFilter}) ，但是该切换开关不起作用，这是第一次显示，这是什么问题？

Answer 1

您可能正在寻找...

<ul className={ this.state.openFilter ? "show" : "hide" }></ul>

Answer 2

在没有看到其余功能的情况下，我只能假设您打算执行以下操作。

<ul
  className={classnames({
    show: this.state.openFilter,
    hide: !this.state.openFilter
  })}
/>

为了清楚起见， classnames接受字符串和/或对象的参数。 字符串参数显示为书面形式，其值是真实的。 而对象实参键将转换为其值真实的类。