精华内容
参与话题
问答
  • React学习系列Antd的使用

    千次阅读 2018-12-25 14:44:40
    一个方便极速开发应用的插件 Ant Design ,这些相当于帮我们封装了常用的组件,我们直接拿来用就行。 在vue中也有这样的插件如:element-ui 和 ... cnpm install antd --save 2、在用到的地方引入组件和css ...

    一个方便极速开发应用的插件 Ant Design ,这些相当于帮我们封装了常用的组件,我们直接拿来用就行。

    在vue中也有这样的插件如:element-ui 和 ivew

    链接:https://ant.design/docs/react/introduce-cn

    快速使用步骤:

    1、安装插件

     cnpm install antd --save

    2、在用到的地方引入组件和css (css可以在全局css的上面引入)

    import {DatePicker,Button} from 'antd';  // 加载 JS
    import 'antd/lib/date-picker/style/css';        // 加载 CSS 

    3、在render方法中使用 

    <DatePicker />
    <Button type="primary">Hello</Button>

    源码:

    import React,{Component} from 'react'
    import {DatePicker,Button} from 'antd';  // 加载 JS
    import 'antd/lib/date-picker/style/css';        // 加载 CSS
    class AntdDemo extends Component {
        constructor(props){
            super(props);
        }
    
    
        render(){
            return (
                <div>
                    <DatePicker />
                    <Button type="primary">Hello</Button>
                </div>
    
            )
        }
    }
    
    export default AntdDemo;

    效果图:

     

     

    展开全文
  • antd的使用

    万次阅读 2019-05-22 07:31:36
    antd的使用:antd的官网有每一个组件的详细使用代码,下面简单描述一下 1:安装 npm install antd --save 2.样式引入import ‘antd/dist/antd.css’; 3.eg 引入import { Input } from ‘antd’; 4.使用<Input ...

    antd的使用:antd的官网有每一个组件的详细使用代码,下面简单描述一下
    1:安装 npm install antd --save
    2.样式引入import ‘antd/dist/antd.css’;
    3.eg 引入import { Input } from ‘antd’;
    4.使用<Input placeholder={‘请输入’}/>
    在这里插入图片描述

    展开全文
  • antd快速开发(Form篇)

    千次阅读 2019-10-18 08:08:00
    作者 | 王三少前言由于一直在做中台业务,后台项目特别多,但是后台项目的特点是:大量的列表和大量表单,重复开发会降低效率,所以我这边总结了一下使用antd组件搭建form...

    作者 | 王三少

    前言

    由于一直在做中台业务,后台项目特别多,但是后台项目的特点是:大量的列表和大量表单,重复开发会降低效率,所以我这边总结了一下使用antd组件搭建form的快捷方法。希望能对大家有用。

    传统Form搭建

    首先传统搭建一个form表单,那么代码可能会是下面这样子

    import React from 'react';
    import { Form, Input } from 'antd';
    
    @Form.create()
    class MyTestForm extends React.Component {
      render() {
        const { form: { getFieldDecorator } } = this.props;
        return(
          <Form>
            <Form.Item label='姓名'>
              {
                getFieldDecorator('username', {
                  rules: [
                    {
                      required: true,
                      message: '这是必填项'
                    }
                  ]
                })(<Input placeholder="placeholder" />)
              }
            </Form.Item>
            <Form.Item label='密码'>
              {
                getFieldDecorator('password', {
                  rules: [
                    {
                      required: true,
                      message: '这是必填项'
                    }
                  ]
                })(<Input placeholder="placeholder" />)
              }
            </Form.Item>
          </Form>
        )
      }
    }
    
    export default MyTestForm;

    目前只有两个表单项,看起来代码还挺清晰的,假如这个表单是很复杂的表单,有多个表单项,这块的代码会很长,维护和开发起来都是不方便,最重要的再来一个大的表单,你还是会需要写这么多的代码。这样就影响了开效率。

    优化后的Form

    我们想要的是,尽量少写(不写)重复性的代码,让代码的复用性更高。我这块做了一些优化,主要的流程如图:

    主要的几个点:

    • 将最底层,最重要的部分抽离出来,也就是BaseItem组件,BaseItem具备的能力是form的能力,双向绑定的能力等,这是个纯净的组件,不包含任何UI层面的东西。

    • UI层的东西也单独抽离出来,以方便以后UI层面的拓展。(例如想自己设计一套UI样式,就只用直接新开发一套UI层面的东西,而不用担心原子层组件的代码)。

    • 每个表单的信息抽离成配置文件,使页面维护起来更方便。

    具体的代码如下

    //BaseItem.js(原子层)
    const BaseItem = (props) => {
      const { form: { getFieldDecorator }, config } = props;
      const { name, children, ...argv } = config;
      return name ? getFieldDecorator(name, { ...argv })(children) : (children);
    }
    
    export default BaseItem;
    //ItemLayout.js(UI组件)
    import React from 'react';
    import { Form } from 'antd';
    
    //Layout也可以用自己的UI组件
    const Layout = ({ config: { itemOptions }, children }) =>
      <Form.Item { ...itemOptions } >{ children }</Form.Item>
    
    const hidden = (isHidden) => {
      const type = typeof(isHidden);
      return (type === 'function' && isHidden()) || type === undefined || isHidden;
        //默认是显示
    }
    
    class ItemLayout extends React.Component {
      render() {
        const { children } = this.props;
        return(
          <>
            {
              React.Children.map(
                children, (child, i) => {
                  const { config: { isHidden, ...argv}} = child.props;
                  return hidden(isHidden) ? null : //具有隐藏表单项能力
                      React.cloneElement(
                        <Layout { ...argv }>{ child }</Layout>,
                        {
                          ...children.props
                        }
                      )
                }
              )
            }
          </>
        )
      }
    }
    
    export default ItemLayout;
    //config.js(配置文件)
    import React from 'react';
    import { Input } from 'antd';
    
    export const formConfig = () => {
      return [
        {
          itemOptions : { //Form.Item的api配置
            label: '姓名'
            //...argv
          },
          name: 'username',
          initialValue: '',
          rules: [],
          children: <Input />
          //...argv
        },
        {
          itemOptions : {
            label: '密码'
          },
          name: 'password',
          initialValue: '',
          rules: [],
          children: <Input />,
          isHidden: true //隐藏此项 默认是显示
        },
        {
          itemOptions : {
            label: '密码'
          },
          name: 'password',
          initialValue: '',
          rules: [],
          children: <Input />,
          isHidden: () =>  false //通过方法来动态显示隐藏
        },
      ]
    }

    支持antd Form 所有的api

    配置文件为什么是使用函数的形式?因为可以通过函数的参数,实现配置文件和页面之间进行数据的传递。

    在页面就这样使用,代码如下

    import React from 'react';
    import { Form, Input } from 'antd';
    import { formConfig } from './config.js';
    import BaseItem from './BaseItem';
    import ItemLayout from './ItemLayout';
    
    @Form.create()
    class MyTestForm extends React.Component {
      render() {
        const { form } = this.props;
        return(
          <Form>
            {
              formConfig().map((item, i) => 
                 <ItemLayout><BaseItem key={i} config={item} form={form}/></ItemLayout>)
            }
          </Form>
        )
      }
    }
    
    export default MyTestForm;

    相比传统搭建Form是不是快捷了很多,而且页面代码层面更显得更清晰。

    注意:

    假如是想使用自定义的组件,(一个个性化的业务组件),简单点,我对<Input/>的封装

    //自动trim的Input
    import { Component } from 'react';
    import { Input } from 'antd';
    
    class TrimInput extends Component {
      handleChange = (e) => {
        e.target.value = e.target.value.trim();
        this.props.onChange(e.target.value); //Input Chang 后将值传递给props
      }
    
      render() {
        const { value, ...argv } = this.props;
        return(
          <Input
            value={ value } //将props的填在Input中
            { ...argv }
            onChange={this.handleChange}/>
        )
      }
    }
    
    export default TrimInput;

    自定义的业务组件需要具备双向数据流的能力,最重要的一点是在更新的时候需要 调用this.props.onChange(data)

    搜索Form包装(SearchForm

    假如觉得这还不够过瘾,那么一起来基于BaseItem来再包装业务组件吧。相信每个后台都有搜索能力吧,那么我们就包装一个搜索的SearchForm

    主要就是增加一个search功能并把form的值传递出去。

    主要代码如下:

    //searchForm.js
    import React from 'react';
    import { Form, Button } from 'antd';
    
    import BaseItem from './BaseItem';
    import ItemLayout from './ItemLayout';
    
    @Form.create()
    class SearchForm extends React.Component {
    
      handleSearch = () => {
        const { form: { validateFields }, search } = this.props;
        validateFields((err, fieldsValue) => {
          console.log(fieldsValue);
          if(!err) {
            search && search(fieldsValue);
          }
        })
      }
    
      render() {
        const { form, searchConfig, search, form: { resetFields } } = this.props;
        return(
          <>
            <Form onSubmit={this.handleSearch}>
              {
                searchConfig().map((item, i) => 
                   <ItemLayout><BaseItem key={i} config={item} form={form}/></ItemLayout>)
              }
              {
                search && <div>
                  <Button htmlType="submit" type="primary" style={{marginRight: '20px'}}>
                      搜索
                  </Button>
                  <Button onClick={() => resetFields()}>重置</Button>
                </div>
              }
            </Form>
          </>
        )
      }
    }
    
    export default SearchForm;

    页面里面使用,表单项还是抽成配置文件使用:

    //config.js 查询条件
    export const searchConfig = () => {
      return [
        {
          itemOptions : {
            label: '条件一'
          },
          name: 'name1',
          initialValue: '',
          rules: [],
          children: <Input />
        },
        {
          itemOptions : {
            label: '条件二'
          },
          name: 'name2',
          initialValue: '',
          rules: [],
          children: <Input />
        }
      ]
    }
    import React from 'react';
    import { searchConfig } from './config';
    import SearchForm from './SearchForm';
    
    class MyTestForm extends React.Component {
      handleSearch = value => {
        console.log(value);//获取到的查询条件
      }
      render() {
        return(
          <SearchForm searchConfig={searchConfig} search={this.handleSearch} />
        )
      }
    }
    
    export default MyTestForm;

    这样子写查询表单是不是很快呀,以后遇到查询就引用这个组件,然后抽一个配置文件,这样就OK了。

    antd Form  需要注意的几个问题。

    1. initialValue 这个属性只是设置表单的初始值,当需要动态更改表单的值的时候,使用 setFieldsValue  

    2. resetFields这个属性是重置一组输入控件的值与状态,(将值重置为initialValue , 而不是清空数据,需要清空数据还是使用setFieldsValue

    antd Form 新的改动

    antd Form 将在第4个版本使用 rc-field-form, 但是还没有发布,我是在4.0-prepare分支上看到。

    那么两个底层组件 有什么区别呢?

    首先rc-field-form 会尽量在api层面上保持一致,但是仍有地方做了改动。主要是以下几点:

    • 当没有手动更新过表单的时候,将不会收集initialValues 的值

      rc-form里面,如果用户没有操作过表单,将会从form的initialValues 收集值。他们认为这是一个bug,但是好多用户是用了这个,所以他们不做修复。在rc-field-form中,将不会有这个bug。如果想改变组件的值,使用 setFieldsValue 代替。

    • 嵌套的name使用数组代替字符串

      rc-form里面支持user.name,最终会被解释成为{user:{ name: '' } }

      rc-field-form将是['user', 'name'] 解释成为 {user: { name: '' }} 并且会把  user.name解释成为{ ['user.name']: ''}

    • 删除validateFieldsAndScroll这个属性

      是因为使用了findDomNode,但是findDomNodeStrictMode中被标记为警告。认为这是对表单组件的过度控制。

    • getFieldsError 将总是返回来数组

      rc-form 当没有错的时候,返回的是null,rc-field-form现在返回的是一个空数组

    • 删除了validateFields的callback函数

      是因为ES8支持async/await,没有理由不使用它。我们使用的时候应该是

      async function() {
        try {
          const values = await form.validateFields();
          console.log(values);
        } catch (errorList) {
          errorList.forEach(({ name, errors }) => {
            // Do something...
          });
        }
      }
    • setFields将不触发onFieldsChangesetFieldsValue不触发onValuesChange

     

    总结

    写这篇文章主要是自己做后台的Form的总结,还有是为大家提供一种思路,后台快速开发的方式。

    后面还会更新其它antd 组件,主要是如何开发更适合业务场景的组件。

    展开全文
  • antd总结

    2019-03-07 09:26:34
    antd使用总结 demo总结 1.demo目录结构 2.demo简介 antd为我们提供了开箱即用的react组件,demo主要是利用antd的各个组件实现页面效果,antd官网https://ant.design/index-cn antd总结 1.安装 $ npm ...

    antd使用总结

    demo总结

    1.demo目录结构

    2.demo简介

    antd为我们提供了开箱即用的react组件,demo主要是利用antd的各个组件实现页面效果,antd官网https://ant.design/index-cn

     

    antd总结

    1.安装

    $ npm install antd --save
    $ yarn add antd

    2.引入

    引入控件

    import { DatePicker } from 'antd';

    引入样式

    import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'

     

    button组件

    引入import {Button} from ‘antd’

    属性 说明 类型 默认值
    type 按钮的主题 string(primary|danger|dashed|disabled)  
    icon 带图标的按钮 string  
    loading 设置按钮载入状态 boolean false
    size 设置按钮大小 string default

    具体的属性可以参考文档。

    演示

    antd-button

    Modal组件

    模态对话框

    使用时机

    需要用户处理事务,又不希望跳转页面以致打断工作流程时,可以使用 Modal 在当前页面正中打开一个浮层,承载相应的操作。

    另外当需要一个简洁的确认框询问用户时,可以使用 Modal.confirm() 等语法糖方法。

     

    用法

    静态modal:用法在用户处理的事件中的设置modal的状态属性visible,如果为true则显示,false则不显示,同时modal框中可以设置onOk,以及onCancel方法。

     

    示例

    <Modal

    title="xxx"

    style={{top:20}}

    visible={this.state.visible}

    onOk={()=>this.handleOk('showmodal3')} //这样可以传参给定义的方法

    onCancel={()=>this.handleCancel('showmodal3')}

    >

     

    confirm:在用户处理的事件中使用modal.confirm()方法,并设置confirm的属性,就会出现确认框

     

    示例

    handleConfirm=(type)=>{

    Modal[type]( //这样相当于Modal.type <==> Modal["type"] 是一样的

    {

    title:"你喜欢篮球吗?", //确认框的标题

    content: "是的 我喜欢", //确认框的内容

    onOk() {

    alert("ok")

    },

    onCancel() {

    alert("cancel")

    }

    }

    )

    }

     

    重要的属性

    modal

    参数 说明 类型 默认值
    visible 设置modal是否可见 boolean fales
    title 标题 string  
    okText 页脚确认文字 string  
    cancelText 页脚取消文字 string  
    onOk 页脚确认的回调 function  
    onCancel 页脚取消的回调 function  

     

    modal.method

    包括:

    • Modal.info

    • Modal.success

    • Modal.error

    • Modal.warning

    • Modal.confirm

    重要属性

    参数 说明 类型 默认值
    title 标题 string  
    content 内容 string|ReactNode
    okText 页脚确认文字 string  
    cancelText 页脚取消文字 string  
    onOk 页脚确认的回调 function  
    onCancel 页脚取消的回调 function  

    具体属性可以参考官方文档

     

    演示


    antd-modal

    Spin

    用于页面和区块的加载中状态

     

    使用时机

    页面局部处于等待异步数据或正在渲染过程时,合适的加载动效会有效缓解用户的焦虑。

     

    用法

    设置size大小,设置delay属性可以延迟显示,设置tip显示字体,设置spinning可以控制是否旋转

     

    示例

    <Spin size="small" />

     

    重要的属性

    参数 说明 类型 默认值
    delay 延迟显示加载效果的时间(防止闪烁) number (毫秒) -
    spinning 是否为加载中状态 boolean true
    size 组件大小,可选值为 small default large string 'default'
    tip 当作为包裹元素时,可以自定义描述文案 string -

     

    演示

    antd-spin

    notification

    全局展示通知提醒信息。

     

    使用时机

    在系统四个角显示通知提醒信息。经常用于以下情况:

    • 较为复杂的通知内容。

    • 带有交互的通知,给出用户下一步的行动点。

    • 系统主动推送。

     

    用法

    在用户处理事件中使用notification()方法,在使用该方法前可以使用notification.config()来进行配置。

     

    示例

    handleOpen = (type,des) => {

    if(des){

    notification.config({

    placement: des, //配置提示的方向,有坐上,坐下,右上,右下四个方向。

    });

    }

    notification[type]({

    message: 'New Title',

    description: 'New description.',

    })

    }

     

    notificatioin.method(config)

    • notification.success(config)

    • notification.error(config)

    • notification.info(config)

    • notification.warning(config)

    • notification.warn(config)

    • notification.open(config)

    • notification.close(key: String)

    • notification.destroy()

    重要属性

    参数 说明 类型 默认值
    description 通知提醒内容,必选 string|ReactNode -
    message 通知提醒标题,必选 string|ReactNode -

     

    还提供了一个全局配置方法,在调用前提前配置,全局一次生效。

    • notification.config(options)

    notification.config({
      placement: 'bottomRight',
      bottom: 50,
      duration: 3,
    });

     

    演示

    ANTD

    Message全局提示

    全局展示操作反馈信息。

     

    使用时机

    • 可提供成功、警告和错误等反馈信息。

    • 顶部居中显示并自动消失,是一种不打断用户操作的轻量级提示方式。

     

    用法

    message.method(“xxx”)

     

    message.method()

    组件提供了一些静态方法,使用方式和参数如下:

    • message.success(content, [duration], onClose)

    • message.error(content, [duration], onClose)

    • message.info(content, [duration], onClose)

    • message.warning(content, [duration], onClose)

    • message.warn(content, [duration], onClose) // alias of warning

    • message.loading(content, [duration], onClose)

     

    全局方法

    还提供了全局配置和全局销毁方法:

    • message.config(options)

    • message.destroy()

    message.config

    message.config({
      top: 100,
      duration: 2,
      maxCount: 3,
    });

     

    重要属性

    参数 说明 类型 默认值
    content 提示内容 ReactNode -
    duration 自动关闭的延时,单位秒。设为 0 时不自动关闭。 number 3
    onClose 关闭时触发的回调函数 Function -
    icon 自定义图标 ReactNode -

     

    示例

    message.success(“xxx”)

     

    演示

    antd-message

    Tabs页签

    选项卡切换组件。

     

    使用时机

    提供平级的区域将大块内容进行收纳和展现,保持界面整洁。

     

    示例

    <Card title="Tabs页签">

    <Tabs defaultActiveKey="1" onChange={this.handlecallback}>

    <TabPane tab="Tab 1" key="1">欢迎学习react教程</TabPane>

    <TabPane tab="Tab 2" key="2">react是一个非常棒的MV*框架</TabPane>

    <TabPane tab="Tab 3" key="3">努力学习react框架</TabPane>

    </Tabs>

    </Card>

     

    重要的属性

    Tabs

    参数 说明 类型 默认值
    activeKey 当前激活 tab 面板的 key string
    defaultActiveKey 初始化选中面板的 key,如果没有设置 activeKey string 第一个面板
    onChange 切换面板的回调 Function(activeKey) {}
    onEdit 新增和删除页签的回调,在 type="editable-card" 时有效 (targetKey, action): void

     

    Tabs.TabPane

    参数 说明 类型 默认值
    forceRender 被隐藏时是否渲染 DOM 结构 boolean false
    key 对应 activeKey string
    tab 选项卡头显示文字 string|ReactNode

     

    演示

    antd-tabs

     

    Form

    具有数据收集、校验和提交功能的表单,包含复选框、单选框、输入框、下拉选择框等元素。

     

    表单

    我们为 form 提供了以下三种排列方式:

    • 水平排列:标签和表单控件水平排列;(默认)

    • 垂直排列:标签和表单控件上下垂直排列;

    • 行内排列:表单项水平行内排列。

     

    表单域

    表单一定会包含表单域,表单域可以是输入控件,标准表单域,标签,下拉菜单,文本域等。

    这里我们封装了表单域 <Form.Item />

    <Form.Item {...props}>
      {children}
    </Form.Item>

     

    用法

    使用getFieldDecorator进行双向绑定,使用getFieldsValue获取组件的值,使用Form.create创建组件

     

    示例

    定义getFieldDecorator

     

    使用getFieldDecorator

    使用create包装form组件以传递this.props

    使用getFieldsValue方法获取表单域的值

    使用validateFields方法用来检验表单域

     

    重要属性

    Form

    参数 说明 类型 默认值
    form Form.create() 包装过的组件会自带 this.props.form 属性 object -
    layout 表单布局 'horizontal'|'vertical'|'inline' 'horizontal'
    onSubmit 数据验证成功后回调事件 Function(e:Event)  

    表单域中的组件可以自行参考文档

    演示

    antd-form

     

    table表格

    展示行列数据。

     

    何时使用

    • 当有大量结构化的数据需要展现时;

    • 当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。

     

    用法

    table必须要有columns和DataSource属性一个定义列数据,一个定义数据源

     

    示例

     

    定义列

     

    定义数据源

     

    重要属性

    Table#

    参数 说明 类型 默认值
    bordered 是否展示外边框和列边框 boolean false
    columns 表格列的配置描述,具体项见下表 ColumnProps[] -
    dataSource 数据数组 any[]  

    其余属性可参考antd官网

     

    演示

    antd-table

    展开全文
  • 参考: ... Ant Design Pro 是一个企业级中后台前端/设计解决方案。可以理解为:适合中后台的通用组件库,一个UI设计语言。ant design pro 其实相当于一个官方版的脚手架,当然它里面还对一些组件进行了优化。...
  • antd下载文件小结

    千次阅读 2019-03-22 11:02:42
    下载的核心方法 export const contextPath = process.env.NODE_ENV === 'production' ? '/portal' : ''; //'/portal' 对应后台的 springboot 的contextPath import { contextPath } from '../../../custom/contants...
  • antd 源码 学习(进行中...)

    千次阅读 2019-03-10 18:46:22
    因为之前自己也封装过通用组件库并上传到npm, 所以惯性驱使下直接打开了node_modules 目录 下antd的 代码翻看 可以看到如下目录结构 ├── dist ├── es ├── lib ├── node_modules ├── CHANGELOG.en-...
  • antd 开发框架包

    2018-10-19 23:45:49
    antd 开发框架包 1组件化&;antd将UI分成不同的组件,每个组件都独立封装缺陷下面这些都没有:事件系统(除了原生的DOM事件)AJAX功能数据层Promises应用程序架构单单reactjs的代码压缩后也需要147k以上reactjs代码量最多...
  • 一、React中使用Antd antd官网:https://ant.design/docs/react/introduce-cn step1:安装antd :【cnpm install antd --save】/ 【 yarn add antd】 step2:在react项目的css中引入antd的css: @import '~antd...
  • https://github.com/ajuner/vue-antd 开发分支: dev 来star和加入开发吧! 首先谈谈为什么对于vue我放弃了模板语法转向了render的CreateElement方法再转成jsx。 学习源码是一件很痛苦的过程,不过也是看老的过程中...
  • 基于React+antd的后台管理模板(可预览)

    万次阅读 多人点赞 2018-08-05 13:42:53
    自己利用业余时间,基于React+antd写了一个后台管理模板。主要是熟悉antd组件和React,页面主要还是展示页面,不涉及后台交互。 特点: 我用
  • EF(EFCore)性能优化与高级用法

    千次阅读 2020-05-18 11:48:13
  • antd mobile(一) 环境搭建

    万次阅读 2017-08-11 23:26:04
    现在用个组件可能就是n步了,一个下午都没把antd mobile的组件展示出来,各种坑啊,看着官方文档一步一步也还是满地坑。 吐槽就免了,还是记录下来吧: 第一步:采用dva创建项目,这个如果不会看我前面写的文章...
  • antd

    千次阅读 2017-08-18 15:11:08
    ant.design是React组件,react是当前最流行的前端框架之一
  • 改变antd组件样式的方法

    万次阅读 2019-06-23 15:23:29
    实际项目中大家经常会引入antd进行项目开发,对于如何更改antd组件的样式应该也是很多朋友都关心的,笔者今天就给大家分享一下笔者知道的方法: 一:用CSS覆盖掉antd原有的样式: 这是更改tooltip的方法,在控制台...
  • antd Upload 文件上传

    万次阅读 2018-10-11 16:14:40
    1.antd官网Upload组件: https://ant.design/components/upload-cn/ 2.下图是最近开发的上传文档的效果:   3.文件上传的实现: (1)方法一:antd默认上传。 a:渲染文件上传组件。getPDFURL()方法为...
  • React引入antd

    2017-12-20 17:34:25
    随着React技术的不断火热,前端人员开始学习React。React需要引入antd,也许这篇文章能帮助到您。
  • 今天给大家带来React项目结合Antd的时候如何渲染二级菜单 就算你用其他的UI框架也是换汤不换药。 1.首先配置Antd,关于配置Antd请前往React配置Antd处观看。 2.然后在routes文件定义你的sidebar数据 其中有一个...
  • dvaJS配置antd以及按需引入

    万次阅读 2019-06-06 07:20:38
    首先通过npm || cnpm || yarn等方式在项目目录安装antd 和 babel-plugin-import。 babel-plugin-import是用来按需加载antd的脚本和样式的。 $ npm install antd babel-plugin-import -S 编辑 .webpackrc文件,使 ...
  • react+electron+AntD编辑桌面应用

    千次阅读 2019-03-01 16:45:27
    二、要下载react,有一个快捷的方法,创建react应用,使用脚手架,下载(可选择是否全局安装): npm install --global create-react-app 成功运行后会显示: 三、创建react项目: create-react-app demo ...

空空如也

1 2 3 4 5 ... 20
收藏数 30,659
精华内容 12,263
关键字:

antd