【React】React实现手风琴效果

需求背景

效果图：



由于不确定手风琴的个数，所以无法通过一个全局的state.hidden属性统一设置。

有两种解决方法：
1. 数组的方式
2. 建立索引值查找（本文所使用的方法）

import React, { Component } from 'react';import styles from './List.css';import { connect } from 'react-redux';import { loadList } from '../../actions';@connect(    (state, ownProps) => {        const selectedMenu = ownProps.location.hash.split('#')[1];  //获取URL中的hash值        return {            selectedMenu,        }    }, { loadList })class List extends Component {    constructor(props) {        super(props);        this.renderSection = this.renderSection.bind(this);    }    //控制是否展开二级标题    handleSubTitleShow = (evt) => {        const node = evt.currentTarget;        const idx = node.dataset.idx;        const { history, location, selectedMenu } = this.props;        //如果双击一级标题，清空hash值，收起当前的二级标题。否则认为是单击，展开二级标题        if (selectedMenu === idx) {            history.replace({                ...location,                hash: '',            });        }        else {            history.replace({                ...location,                hash: idx,            });        }    }    //二级标题    renderSectionRow(item, idx) {        const { name } = item;        return (            <div className={styles.sectionContentRow} key={`secRow${idx}`}>Q{idx+1}：{name}</div>        );    }    //一级标题    renderSection(item, idx) {        const key = '' + idx;   //由于从URL获取的hash值是字符串，所以把idx也改为字符串，方便后面做对比        const { selectedMenu } = this.props;        const { name, articleVoList } = item;        return (            <div className={styles.section} key={key}>                <a data-idx={key} className={styles.secTitle} onClick={this.handleSubTitleShow}>                    <span>{name}</span>                    <span className={selectedMenu === key ? styles.secTitleIconCurrent : styles.secTitleIcon}> </span>                </a>                {selectedMenu === key && articleVoList.map(this.renderSectionRow)}            </div>        );    }    render() {        const { list } = this.props;        if (!list) {            return null;        }        return (            <div className={styles.wrapper}>                {list.map(this.renderSection)}            </div>        );    }}export default List;

---

Author：致知
Sign：路漫漫其修远兮，吾将上下而求索。