最近做的项目使用到了ant.design “蚂蚁”框架，https://ant.design/docs/react/getting-started-cn，从中学习了一些知识，现在说其中的一个数组

页面的代码基本都是在js里面写的，开始我们的数组

定义数组

const payList = [{

        num: 200, value: 3000

    }, {

        num: 500, value: 6000

    }, {

        num: 1000, value: 11000

    }, {

        num: 2000, value: 18000

    }, {

        num: 5000, value: 40000

}]

获取数组并循环

{payList.map((v, index) => {

           return (

                            <Col md={12} sm={24} lg={12} xl={12} xxl={8} style={{ marginBottom: '15px' }}>

                                       <div style={{ border: '1px solid #cdcdcd', height: '60px', paddingRight: '0' }}>

                                                   <Col span={12}><p style={{ fontSize: '20px', color: '#000000', marginBottom: '0', lineHeight: '60px', textAlign: 'center' }}>{v.num}份</p></Col>

                                                     <Col span={12} style={{ background: '#3698fe', padding: '0 0', height: '58px' }}><a href="#/recharge" style={{ fontSize: '14px', color: '#ffffff', textAlign: 'center', width: '100%', height: '100%', display: 'block', }}><p style={{ marginBottom: '0', marginTop: '6px', fontSize: '16px' }}>￥{v.value}</p><p style={{ marginBottom: '0' }}>购买>></p></a></Col>

                                           </div>

                                     </Col>

                                 )

    })}

效果图