如何在React中创建折叠展开列表

我尝试React (v 16.5)使用以下条件创建折叠并展开侧面菜单-

页面加载时，第一项（圆形）将处于展开视图中。一个项目可以一次展开，例如，如果用户单击第二个项目（“规范”），则第一个项目将折叠。我还希望在收起/展开事务期间进行一些CSS动画处理，例如平稳地向下/向上调整每个项目的主体部分并更改箭头图标。我的方法是在每个项目（sidebar-nav-menu-item）上动态添加/删除CSS类，例如-

sidebar-nav-menu-item item-active

因此，当一个项目处于展开视图时，它应该像上一类，而item-active当其处于折叠视图时将其删除。默认情况下，div当项目处于折叠模式时，应通过CSS隐藏body （sidebar-nav-menu-item-body）。

import React, { Component } from 'react';

className SidebarNavs extends React.Component{
    constructor(props) {
       super(props);
    }

    render() {
        return(
            <div className="sidebar-nav">
                <div className="sidebar-nav-menu">

                    <div className="sidebar-nav-menu-item" data-id="circulars">
                        <div className="sidebar-nav-menu-item-head" onClick={this.handleExpandCollaps}>
                            <div className="sidebar-nav-menu-item-head-title">Circulars</div>
                            <div className="sidebar-nav-menu-item-head-help">
                                <button type="button" className="btn-help" onClick={this.moreInfoClick}>View more info</button>
                            </div>
                            <div className="sidebar-nav-menu-item-head-icon">
                                <i className="fa fa-caret-down" aria-hidden="true"></i>
                            </div>
                        </div>
                        <div className="sidebar-nav-menu-item-body">BODY CONTENT HERE</div>
                    </div>

                    <div className="sidebar-nav-menu-item" data-id="specifications">
                        <div className="sidebar-nav-menu-item-head" onClick={this.handleExpandCollaps}>
                            <div className="sidebar-nav-menu-item-head-title">Specifications</div>
                            <div className="sidebar-nav-menu-item-head-help">
                                <button type="button" className="btn-help" onClick={this.moreInfoClick}>View more info</button>
                            </div>
                            <div className="sidebar-nav-menu-item-head-icon">
                                <i className="fa fa-caret-down" aria-hidden="true"></i>
                            </div>
                        </div>
                        <div className="sidebar-nav-menu-item-body">BODY CONTENT HERE</div>
                    </div>


                    <div className="sidebar-nav-menu-item"  data-id="wo">
                        <div className="sidebar-nav-menu-item-head" onClick={this.handleExpandCollaps}>
                            <div className="sidebar-nav-menu-item-head-title">Work Orders</div>
                            <div className="sidebar-nav-menu-item-head-help">
                                <button type="button" className="btn-help" onClick={this.moreInfoClick}>View more info</button>
                            </div>
                            <div className="sidebar-nav-menu-item-head-icon">
                                <i className="fa fa-caret-down" aria-hidden="true"></i>
                            </div>
                        </div>
                        <div className="sidebar-nav-menu-item-body">BODY CONTENT HERE</div>
                    </div>

                </div>
            </div>
        )
    }
}

export default SidebarNavs;

CSS：

.sidebar-nav-menu-item{
   display:block;
}
.sidebar-nav-menu-item-body{
   display:none;
}
.sidebar-nav-menu-item.item-active .sidebar-nav-menu-item-body{
   display:block;
}