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