React 蚂蚁金服+ Antd 组件使用技巧

安装antd 组件

yarn add antd -D   

import {  Card,Button,Table,From,Modal ,Select  } from 'antd';

、引入就可以使用了  

 

使用组件的好处

所有的引入标签和 都是 可变的单双表格格式  自身带着很多的属性、方法    足够平时的使用 

举例子 Vue 和 React中最大差别的   双向数据绑定和  单向数据流：

　　那么Vue是不需要获取value值得，只需要简单的bind 就可以拿到

　　而，React中是单向的  得通过ref  获取到其中的 current.value ,得一个一个的针对拿去，而Antd组件中 也是ref原理，但是可以一次全拿到

　　<OpenCityForm wrappedComponentRef={(formData)=>{
　　　　this.cityForm = formData
　　}}/>

注释：这是一个 组件化标签  代表这个表单  收集到表单中所有的数据  回调！！  

移动端的兼容性

使用 基于Bootstrap 底层的原理，多媒体查询进行组件化封装，xs  sm md    一行分为24列 

Bootstarp 原先分为 12列。

 

常见案例：

1.请求api返回数组数据，进行map  输出数据   返回的是一个对象 如果有二级参数，多加一层判断

2.单机Button  执行一个函数  修改  state 数据，导致  某一个组件 显示与隐藏

3.Modal中嵌套一个  From 表单组件，From 独立出来作为一个 render的 组件 ，将组件放入 显示的位置

4.组件内部  div  用组建中的 Grid 栅格化组件   

 class OpenCityForm extends React.Component{
    render(){
        const formItemLayout  =  {
            labelCol:{
                span: 5 
            },
            wrapperCol:{
                span: 19 
            }
        }
        const { getFieldDecorator }   = this  .props.form;
          return   (
             <Form layout="horizontal">
                <FormItem label="选择城市" {...formItemLayout}> 
                    {
                        getFieldDecorator( 'city_id' ,{
                            initialValue: '1' 
                        })(
                             <Select style={{ width: 100 }}>
                                <Option value="">全部</Option>
                                <Option value="1">北京市</Option>
                                <Option value="2">天津市</Option>
                            </Select>
                         )
                    }
                 </FormItem>
                <FormItem label="营运模式" {...formItemLayout}> 
                    {
                        getFieldDecorator( 'op_mode' , {
                            initialValue:  '1' 
                        })(
                             <Select style={{ width: 100 }}>
                                <Option value="1">自营</Option>
                                <Option value="2">加盟</Option>
                            </Select>
                         )
                    }
                 </FormItem>
                <FormItem label="用车模式" {...formItemLayout}> 
                    {
                        getFieldDecorator( 'use_mode' , {
                            initialValue:  '1' 
                        })(
                             <Select style={{ width: 100 }}>
                                <Option value="1">指定停车点</Option>
                                <Option value="2">禁停区</Option>
                            </Select>
                         )
                    }
                 </FormItem>
            </Form>
         );
    }
}
OpenCityForm  = Form.create({})(OpenCityForm);

View Code

查看更多关于React 蚂蚁金服+ Antd 组件使用技巧的详细内容...