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

我尝试在中创建折叠和展开侧菜单React (v 16.5)符合以下标准 -

页面加载时，第一个项目（通告）将处于展开视图中。任何一个项目都可以一次展开，例如，如果用户单击第二个项目（规格），第一个项目将折叠。我还想要在折叠/展开事务期间使用一些 CSS 动画，例如平滑地向下/向上移动每个项目的主体部分并更改箭头图标。我的方法是在每个项目上添加/删除 CSS 类（sidebar-nav-menu-item) 动态地，例如 -

sidebar-nav-menu-item item-active

因此，当一个项目处于展开视图中时，它应该像上面的类一样并删除item-active当它处于折叠视图时。默认情况下，主体div当项目处于折叠模式时，应通过 CSS 隐藏 s (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;
}

您应该使用状态变量来显示可折叠项目处于活动/非活动状态。

我稍微修改了您的代码以适应您的要求。

class App extends Component {
  constructor() {
    super();
    this.state = {
        activeCollapse: 'circulars'
    };
  }

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

  moreInfoClick = (e) => {
    e.stopPropagation();
    console.log("clicked");
  }
  render() {
    return (
      <div>
        <div className="sidebar-nav">
          <div className="sidebar-nav-menu">

            <div className={`sidebar-nav-menu-item ${this.state.activeCollapse === "circulars" ? 'item-active' : ''}`} onClick={() => this.handleExpandCollaps("circulars")} data-id="circulars" >
              <div className="sidebar-nav-menu-item-head">
                <span className="sidebar-nav-menu-item-head-title">Circulars</span>
                <span className="sidebar-nav-menu-item-head-help">
                  <button type="button" className="btn-help" onClick={this.moreInfoClick}>View more info</button>
                </span>
              </div>
              <div className="sidebar-nav-menu-item-body">BODY CONTENT HERE</div>
            </div>

            <div className={`sidebar-nav-menu-item ${this.state.activeCollapse === "specifications" ? 'item-active' : ''}`} onClick={() => this.handleExpandCollaps("specifications")} data-id="specifications">
              <div className="sidebar-nav-menu-item-head">
                <span className="sidebar-nav-menu-item-head-title">Specifications</span>
                <span className="sidebar-nav-menu-item-head-help">
                  <button type="button" className="btn-help" onClick={this.moreInfoClick}>View more info</button>
                </span>
              </div>
              <div className="sidebar-nav-menu-item-body">BODY CONTENT HERE</div>
            </div>


            <div className={`sidebar-nav-menu-item ${this.state.activeCollapse === "wo" ? 'item-active' : ''}`} onClick={() => this.handleExpandCollaps("wo")} data-id="wo">
              <div className="sidebar-nav-menu-item-head">
                <span className="sidebar-nav-menu-item-head-title">Work Orders</span>
                <span className="sidebar-nav-menu-item-head-help">
                  <button type="button" className="btn-help" onClick={this.moreInfoClick}>View more info</button>
                </span>
              </div>
              <div className="sidebar-nav-menu-item-body">BODY CONTENT HERE</div>
            </div>

          </div>
        </div>
      </div>
    );
  }
}

Note:我用过CSS for font-awesome图标。希望您已添加font-awesome

Demo https://stackblitz.com/edit/react-irrf9e