react 展开收起写法（手动展开收起 和 自动展开收起）

一：手动展开收起

html写法：
<div className="pack-unfold">
    {isShow.includes(item.chapterId)?
        <span  className='pack' onClick={() => this.isShow(item.chapterId,0)}>收起</span>:
        <span  className='unfold'  onClick={() => this.isShow(item.chapterId,1)}>展开</span>}
</div>
<div className="table_wrap"  style={{ display: isShow.includes(item.chapterId) ? "block" : "none" }}>
<p>内容哈</p>

</div>
js写法：

//展开全部
isShow = (id,type) => {
    let {isShow} = this.state
    if(type===1){
        isShow.push(id)
    }else {
        isShow.splice(isShow.findIndex(item => item === id), 1)
    }
    this.setState({
        isShow: isShow
    })
}

二：自动展开收起

 

html写法：
 <div className="pack-unfold" onClick={() => this.isShowForm()}>
                                {isBlock ? <span className="pack">收起</span> : <span className="unfold">展开</span>}
                          </div>


<div className="hot-box" style={{display: isBlock ? 'flex' : 'none'}}

<p>内容哈</p>

 </div>

js写法：

//展开全部
    isShowForm = () => {
        this.setState({
            isBlock: !this.state.isBlock
        })
    }