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 

移动端的兼容性

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

Bootstarp 原先分为 12列。

常见案例:

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

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

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

4.

猜你喜欢

转载自www.cnblogs.com/reeber/p/10957416.html
今日推荐