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

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

我对您的代码做了一些修改，以使其符合您的要求。

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>    );  }}

注意： 我曾经使用

CSS

font-awesome

font-awesome

演示版