antd-ant design

官网地址：

https://ant.design/components/list-cn/

使用：

（1）引用css样式：import 'antd/dist/antd.css'

（2）寻找需要的组件：进行引用

例如：

import React,{Component}from 'react';

import  'antd/dist/antd.css'

import { Input,Button,List }from 'antd';

{/*组件的外部，全局数据*/}

const data = [

'Racing car sprays burning fuel into crowd.',

    'Japanese princess to wed commoner.',

    'Australian walks 100km after outback crash.',

    'Man charged over missing wedding girl.',

    'Los Angeles battles huge wildfires.',

];

class Todolist_newextends Component{

render(){

return(

<div style={{marginTop:'10px',marginLeft:'10px'}}>

              <Input size="large" placeholder="small size" style={{width:'300px',marginRight:'10px'}}/>

              <Button type="primary">提交

                  style={{width:'300px',marginTop:'10px'}}

bordered

                  dataSource={data}

renderItem={item => (

                          {item}

                  )}

/>

      )

}

}

export  default Todolist_new;

效果展示：