React 蚂蚁金服+ Antd 组件使用技巧

Posted 2021-12-13 reeber

安装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.