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);

5.能用 Modal  就用 Modal   添加一个页面增加成本

6.能用 message 提示就用这个提示 

 

Antd    学到的东西 

表格

　　动态表格数据渲染

　　分页

　　选中操作指定一条数据   查看详情  修改数据 

表单

　　获取表单修改内容   原先简书使用 ref  （antd中封装了方法 ） Ref Plus

地图

　　https://www.cnblogs.com/reeber/p/10992642.html

图表 

　　https://www.cnblogs.com/reeber/p/10990082.html

富文本

　　https://www.cnblogs.com/reeber/p/10992572.html

 

常用 npm  插件