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 (
      

        
          {itemsName}
        
        
{this.props.children}
      

    );
  }
}

export default ArrowSlide;

　　组件调用：

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

　　页面：

且默认第一项是展开的，代码控制：

 

转载于:https://www.cnblogs.com/yxfboke/p/11281030.html