React实现组件收缩展开功能

xiaxiasilence

已于 2022-03-19 15:54:12 修改

阅读量1.8k

点赞数

文章标签： react

于 2022-03-19 15:51:48 首次发布

本文链接：https://blog.csdn.net/xiaxiasilence/article/details/123596116

版权

constructor() {
        super();
        this.state = {
            activeCollapse: 'classify'
        }
}

handleExpandCollaps = (name) => {
        if (this.state.activeCollapse === name) {
            this.setState({ activeCollapse: '' })
        } else {
            this.setState({ activeCollapse: name })
        }
}

{/* 分类 */}
<li className={`${this.state.activeCollapse === "classify" ? 'active' : ''}`} onClick={() => this.handleExpandCollaps("classify")} data-id="classify">
  <a className='auto'>
    <span className='pull-right text-muted'>
      <i className='fontello icon-fw fontello-angle-right text'></i>
      <i className='fontello icon-fw fontello-angle-down text-active'></i>
    </span>
  </a>
</li>
{/* 页面 */}
<