使用hide show classname切换反应组件

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接受字符串和/或对象的参数。字符串参数出现时写的是它们的值是真实的。而对象参数键被转换为其值非常真实的类。