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

5.能用 Modal  就用 Modal   添加一個頁面增長成本

6.能用 message 提示就用這個提示 

 

Antd    學到的東西 

表格

　　動態表格數據渲染

　　分頁

　　選中操做指定一條數據   查看詳情  修改數據 

表單

　　獲取表單修改內容   原先簡書使用 ref  （antd中封裝了方法 ） Ref Plus

地圖

　　http://www.javashuo.com/article/p-wkwmiimn-d.html

圖表 

　　http://www.javashuo.com/article/p-ypuhutmh-cs.html

富文本

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

 

經常使用 npm  插件