react---簡易展開收起組件

組件核心代碼：

import React from 'react';
// import PropTypes from 'prop-types';

// 展開收起組件
class ArrowSlide extends React.Component {
  static defaultProps = {
    itemLable: false, // 是否展開
    itemsName: '' // 檢查項目名稱
  };
  constructor(props) {
    super(props);
    const { itemLable } = props; // 是否展開收起列表項
    this.state = {
      itemLable
    };
  }

  /**
   * 展開收起切換
   * @memberof EleItem
   */
  handleToggleCondition = () => {
    const { itemLable } = this.state;
    this.setState({ itemLable: !itemLable });
  }

  render() {
    const { itemsName } = this.props;
    const { itemLable } = this.state;

    return (
      <div style={{ marginTop: '10px' }}>
        <a className="arrow-alide" onClick={this.handleToggleCondition}>
          {itemsName}<i className={`iconfont ${itemLable ? 'icon-xiangxia2' : 'icon-xiangshang2'}`} />
        </a>
        <div style={{ transition: 'all .4s', maxHeight: itemLable ? '10000px' : '0px', overflow: 'hidden' }}>{this.props.children}</div>
      </div>
    );
  }
}

export default ArrowSlide;

　　組件調用：

            <ArrowSlide
              itemsName={elem.exam_fee_name} // 檢查項組名稱
              itemLable={index === 0} // 是否展開
              key={i}
            >
              <TemplateBase
                isNum={isNum}
                form={form}
                data={exam_pro_lists}
                parentCode={elem.exam_pro_id}
                onFieldValueChange={(e, field, code, id) => handleTemplateFieldsChange(e, field, code, id)}
              >
                {(exam_pro_lists || []).map(({ exam_code: code = 0 }) => {
                  const checkItem = TemplateBase.config[code];
                  const config = `${code}` === '326';
                  if (checkItem) {
                    return <checkItem.name
                      key={code}
                      code={code}
                      config={config}
                    />;
                  }
                  return '';
                })}
              </TemplateBase>
            </ArrowSlide>

　　頁面：

且默認第一項是展開的，代碼控制：