React 螞蟻金服+ Antd 組件使用技巧

本文轉載自查看原文 2019-05-31 20:39 1226 React

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