React组件_Ant Design

拼搏现实的明天。 2023-06-11 15:21 33阅读 0赞

# Ant Design of React #

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70][]

设计语言：

随着商业化的趋势，越来越多的企业级产品对更好的用户体验有了进一步的要求。

带着这样的一个终极目标，我们（蚂蚁金服体验技术部）经过大量的项目实践和总

结，逐步打磨出一个服务于企业级产品的设计体系 Ant Design。基于『确定』和

『自然』的设计价值观，通过模块化的解决方案，降低冗余的生产成本，让设计者

专注于更好的用户体验。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70 1][]

**Start**

Ant Design 是一个服务于企业级产品的设计体系，组件库是它的 React 实现，antd 被发

布为一个 npm 包方便开发者安装并使用。

在 umi 中，你可以通过在插件集 umi-plugin-react 中配置 antd 打开 antd 插件，antd

插件会帮你引入 antd 并实现按需编译。

--------------------

导入umi-plugin-react插件

\#添加插件

yarn add umi-plugin-react \--dev

config文件中开启dva,跟ant design功能

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70 2][]

我们以Form表单为例,官网地址 [https://ant.design/components/card-cn/][https_ant.design_components_card-cn]

官方代码

import { Card } from 'antd';
    
    ReactDOM.render(
      <div>
        <Card title="Default size card" extra={<a href="#">More</a>} style={
       { width: 300 }}>
          <p>Card content</p>
          <p>Card content</p>
          <p>Card content</p>
        </Card>
        <Card size="small" title="Small size card" extra={<a href="#">More</a>} style={
       { width: 300 }}>
          <p>Card content</p>
          <p>Card content</p>
          <p>Card content</p>
        </Card>
      </div>,
      mountNode,
    );

效果如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70 3][]

我们按照官方给的事例结合使用

创建MyCard.js文件

import React from 'react'
    import { Card } from 'antd'
    
    class MyCard extends React.Component{
        render(){
            return (
                <div>
                    <Card title="Default size card" extra={<a href="#">More</a>} style={
       { width: 300 }}>
                        <p>Card content</p>
                        <p>Card content</p>
                        <p>Card content</p>
                    </Card>
                    <Card size="small" title="Small size card" extra={<a href="#">More</a>} style={
       { width: 300 }}>
                        <p>Card content</p>
                        <p>Card content</p>
                        <p>Card content</p>
                    </Card>
                </div>
            )
        }
    }
    export default MyCard;

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70 4][]

**布局**

官网[https://ant.design/components/layout-cn/][https_ant.design_components_layout-cn]

常用的布局结构

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70 5][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70 6][]

搭建整体布局结构

在umi约定的目录结构中,/src/layouts/index.js 文件将被作为全局布局配置文件

在src目录下创建layouts目录，并且在layouts目录下创建index.js文件，写入内容：

import React from 'react';
    import { Layout } from 'antd';
    
    const { Header, Footer, Sider, Content } = Layout;
    
    class BasicLayer extends React.Component{
    
    
        render(){
            return (
                <Layout>
                    <Sider>Sider</Sider>
                    <Layout>
                        <Header>Header</Header>
                        <Content>Content</Content>
                        <Footer>Footer</Footer>
                    </Layout>
                </Layout>
            )
        }
    }
    
    export default BasicLayer;

配置路由 (非必须)

config/config.js

进行页面访问：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70 7][]

引用子页面

在布局文件中，将Content内容替换成\{this.props.children\}，意思是引入传递的内容。

import React from 'react';
    import { Layout } from 'antd';
    
    const { Header, Footer, Sider, Content } = Layout;
    
    class BasicLayer extends React.Component{
    
    
        render(){
            return (
                <Layout>
                    <Sider>Sider</Sider>
                    <Layout>
                        <Header>Header</Header>
                        <Content>{this.props.children}</Content>
                        <Footer>Footer</Footer>
                    </Layout>
                </Layout>
            )
        }
    }
    
    export default BasicLayer;

配置路由(采用默认路由的可以忽略)

说明：下面的路由配置，是表明你需要通过手动配置的方式上进行访问页面，而不采用umi默认的路由方式。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70 8][]

进行访问测试：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70 9][]

所有的页面效果都是一样的

美化页面

import React from 'react';
    import { Layout } from 'antd';
    
    const { Header, Footer, Sider, Content } = Layout;
    
    class BasicLayer extends React.Component{
    
    
        render(){
            return (
                <Layout>
                    <Sider width={256} style={
       { minHeight: '100vh', color: 'white' }}>E03</Sider>
                    <Layout>
    
                        <Header style={
       { background: '#fff', textAlign: 'center', padding: 0 }}>Header</Header>
                        <Content style={
       { margin: '24px 16px 0' }}>
                            <div style={
       { padding: 24, background: '#fff', minHeight: 360 }}>
                                {this.props.children}
                            </div>
                        </Content>
                        <Footer style={
       { textAlign: 'center' }}>希望每个人身边都会有一个会带给自己带来光明的人</Footer>
                    </Layout>
                </Layout>
            )
        }
    }
    
    export default BasicLayer;

页面效果如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70 10][]

左侧添加导航条

官网[https://ant.design/components/menu-cn/][https_ant.design_components_menu-cn]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70 11][]

代码

import React from 'react';
    import { Layout } from 'antd';
    import { Menu, Icon, Button } from 'antd';
    
    
    const { SubMenu } = Menu;
    const { Header, Footer, Sider, Content } = Layout;
    
    class BasicLayer extends React.Component{
    
    
        constructor(props){
            super(props);
    
            this.state = {
                collapsed: false
            }
        }
    
        render(){
            return (
                <Layout>
                    <Sider width={256} style={
       { minHeight: '100vh', color: 'white' }}>
    
                        <div style={
       { width: 256 ,height:'32px',margin:'16px'}}>
                        </div>
    
                            <Menu
                                defaultSelectedKeys={['1']}
                                defaultOpenKeys={['sub1']}
                                mode="inline"
                                theme="dark"
                                inlineCollapsed={this.state.collapsed}
                            >
                                <Menu.Item key="1">
                                    <Icon type="pie-chart" />
                                    <span>Option 1</span>
                                </Menu.Item>
                                <Menu.Item key="2">
                                    <Icon type="desktop" />
                                    <span>Option 2</span>
                                </Menu.Item>
                                <Menu.Item key="3">
                                    <Icon type="inbox" />
                                    <span>Option 3</span>
                                </Menu.Item>
                                <SubMenu
                                    key="sub1"
                                    title={
                                        <span>
                    <Icon type="mail" />
                    <span>Navigation One</span>
                  </span>
                                    }
                                >
                                    <Menu.Item key="5">Option 5</Menu.Item>
                                    <Menu.Item key="6">Option 6</Menu.Item>
                                    <Menu.Item key="7">Option 7</Menu.Item>
                                    <Menu.Item key="8">Option 8</Menu.Item>
                                </SubMenu>
                                <SubMenu
                                    key="sub2"
                                    title={
                                        <span>
                    <Icon type="appstore" />
                    <span>Navigation Two</span>
                  </span>
                                    }
                                >
                                    <Menu.Item key="9">Option 9</Menu.Item>
                                    <Menu.Item key="10">Option 10</Menu.Item>
                                    <SubMenu key="sub3" title="Submenu">
                                        <Menu.Item key="11">Option 11</Menu.Item>
                                        <Menu.Item key="12">Option 12</Menu.Item>
                                    </SubMenu>
                                </SubMenu>
                            </Menu>
    
    
    
                    </Sider>
                    <Layout>
    
                        <Header style={
       { background: '#fff', textAlign: 'center', padding: 0 }}>Header</Header>
                        <Content style={
       { margin: '24px 16px 0' }}>
                            <div style={
       { padding: 24, background: '#fff', minHeight: 360 }}>
                                {this.props.children}
                            </div>
                        </Content>
                        <Footer style={
       { textAlign: 'center' }}>希望每个人身边都会有一个会带给自己带来光明的人</Footer>
                    </Layout>
                </Layout>
            )
        }
    }
    
    export default BasicLayer;

**为导航添加链接**

需求:点击左侧导航栏右侧进入相应页面

创建俩个页面,用户添加,用户列表

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70 12][]

配置路由(使用默认路由的可以忽略)

//导出一个对象，暂时设置为空对象，后面再填充内容
    export default {
        plugins: [
            ['umi-plugin-react', {
                //暂时不启用任何功能
                dva : true , //开启了dva功能,
                antd : true
            }]
        ],
        routes:[{
            path:'/',
            component:'../layouts',
            routes: [{
                path:'/user',
                routes:[{
                    path:'/user/add',
                    component: './user/UserAdd'
                },{
                    path:'/user/list',
                    component:'./user/UserList'
                }]
            }]
        }]
    };

在路由index.js中引入链接组件

import Link from 'umi/link';//添加链接样式

代码如下

import React from 'react';
    import { Layout } from 'antd';
    import Link from 'umi/link';//添加链接样式
    
    
    import { Menu, Icon, Button } from 'antd';
    
    
    
    const { SubMenu } = Menu;
    const { Header, Footer, Sider, Content } = Layout;
    
    class BasicLayer extends React.Component{
    
    
        constructor(props){
            super(props);
    
            this.state = {
                collapsed: false
            }
        }
    
        render(){
            return (
                <Layout>
                    <Sider width={256} style={
       { minHeight: '100vh', color: 'white' }}>
    
                        <div style={
       { width: 256 ,height:'32px',margin:'16px'}}>
                        </div>
    
                            <Menu
                                defaultSelectedKeys={['1']}
                                defaultOpenKeys={['sub1']}
                                mode="inline"
                                theme="dark"
                                inlineCollapsed={this.state.collapsed}
                            >
                                <SubMenu
                                    key="sub1"
                                    title={
                                        <span>
                                        <Icon type="mail" />
                                        <span>用户管理</span>
                                      </span>
                                    }
                                >
                                    <Menu.Item key="1">
                                        <Link to="/user/list">用户列表</Link>
                                    </Menu.Item>
                                    <Menu.Item key="2">
                                        <Link to="/user/add">用户添加</Link>
                                    </Menu.Item>
                                </SubMenu>
                            </Menu>
    
    
    
                    </Sider>
                    <Layout>
    
                        <Header style={
       { background: '#fff', textAlign: 'center', padding: 0 }}>Header</Header>
                        <Content style={
       { margin: '24px 16px 0' }}>
                            <div style={
       { padding: 24, background: '#fff', minHeight: 360 }}>
                                {this.props.children}
                            </div>
                        </Content>
                        <Footer style={
       { textAlign: 'center' }}>希望每个人身边都会有一个会带给自己带来光明的人</Footer>
                    </Layout>
                </Layout>
            )
        }
    }
    
    export default BasicLayer;

效果如图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70 13][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70 14][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70]: /images/20230531/e962be041854488392d7a588bad8ab71.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70 1]: /images/20230531/9593d7ccc07843108ee0bcf54c0a63d6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70 2]: /images/20230531/bc9122e7c5124ff191453624bd09c6a5.png
[https_ant.design_components_card-cn]: https://ant.design/components/card-cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70 3]: /images/20230531/5bbd5b62367349d7a9c17ad56c2ec082.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70 4]: /images/20230531/87f0b9ef947d4777ba925104edfb189c.png
[https_ant.design_components_layout-cn]: https://ant.design/components/layout-cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70 5]: /images/20230531/9c23c14d56584634ac6f938cc9f64842.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70 6]: /images/20230531/b1025fb0458f4b799a580d20cf9a1b73.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70 7]: /images/20230531/d273ae1270e347a2bae57b110f7975f7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70 8]: /images/20230531/f1b43dec0779406685303035fdb9e943.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70 9]: /images/20230531/43d82345bc764ab0ae0b2551775ec752.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70 10]: /images/20230531/ae08cb215ec34595ad9484a576caa85c.png
[https_ant.design_components_menu-cn]: https://ant.design/components/menu-cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70 11]: /images/20230531/a313ba7a5e4941b8a2f882093834ec64.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70 12]: /images/20230531/4110b64348a94b7eaa7d7104eda3a693.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70 13]: /images/20230531/da964c3cc15049ff9918ce3e3ed34a17.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70 14]: /images/20230531/8877cc9a29ae42d0adf82f90d55ae079.png