用div来设置下拉的展开列表并添加scrollbar

用div来设置下拉的展开列表
1.设置数据源

let moreListItem = [
            {
              status:'warn',
              name:'中海集团 资产负债率',
              value:'87.7%'
            },
            {
              status:'danger',
              name:'股份公司 净资产收益率率',
              value:'7.70%'
            },
            {
              status:'danger',
              name:'西部建设 经营性现金流',
              value:'87.7%'
            },
            {
              status:'warn',
              name:'中建港务 借贷资本率',
              value:'87.7%'
            },
            {
              status:'warn',
              name:'中建六局 资产负债率',
              value:'87.7%'
            },
          ];

2.用div的visibility属性来控制显示或者不显示

<span className={styles['spread']} onClick={this.handleClick}>展开</span>
                      <div className={classNames(styles['morecontent'],'scrollbar')} style={{ visibility:'visible'}}>
                       {
                           moreListItem.map((item,i) => {
                           const { status,project,name,value} = item
                           let text = ''
                           if (status == 'danger') {
                           text = '预警'
                           }if(status == 'warn'){
                             text = '关注'
                             }
                           return (
                           <div className={styles['listcont']}>
                               <span className={styles[`${status}`]}>{text}</span>
                               <span className={styles['item']} >{name}</span>
                               <span className={styles['item']} >{value}</span>
                               <span className={styles['item']}>{" > "}</span>
                           </div>

                           );
                           })
                       }
                       </div>

                </span>

这里注意由于所有的div默认z-index都是0所以不加z-index属性 他会把盒子撑破 所以就设置z-index = 1让他浮在其他div上面
span是不能直接设置宽高的 得在span中设置display:block 和float :left/right属性 这样就可以设置宽高 或者最大高度之类的

添加scrollbar

只要设置div的样式overflow :auto并且div是定高的就可以