需求背景

效果圖：



由於不確定手風琴的個數，所以無法通過一個全域性的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：路漫漫其修遠兮，吾將上下而求索。