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 (
    <div>
      <ShowList></ShowList>
    </div>
  );
}

四、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(
      <div style={{marginTop:'10px',marginLeft:'10px'}}>
        <div>
          {/*antd Input文本框*/}
          <Input placeholder="Basic usage" style={{width:'300px', marginRight:'10px'}}/>
          {/*antd button按钮*/}
          <Button type="primary">提交</Button>
          {/*列表*/}
          <List style={{marginTop:'10px',width:'300px'}}
            bordered
            dataSource={data}
            renderItem={item => (
              <List.Item>
            {item}
              </List.Item>
            )}
          />
        </div>
      </div>

    )
  }
}
export default  showList;

五、测试访问

http://localhost:8000/antdList