React Antd实现antdList页面布局

一、基本概念

React antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

使用地址：https://ant.design/docs/react/introduce-cn

使用 npm 或 yarn 安装

$ npm install antd --save

$ yarn add antd

使用antd需要引入：import 'antd/dist/antd.css'; 

二、完成效果

三、antdList.js

import React from 'react';
import ShowList from '../components/ShowList';

export default function() {
  return (
    

      
    
  );
}

四、showList.js

import React,{ Component } from 'react';
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
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 showList extends Component{
  render(){
    return(
      

        

          {/*antd Input文本框*/}
          
          {/*antd button按钮*/}
          提交
          {/*列表*/}
           (
              
            {item}
              
            )}
          />
        
      

    )
  }
}
export default  showList;

五、测试访问

http://localhost:8000/antdList