Ant Design框架中不同的组件访问不同的models中的数据
Ant Design框架中不同的组件访问不同的models中的数据
本文记录了我在使用该框架的时候踩过的坑,方便以后查阅。
一、models绑定
在某个组件(控件或是页面),要想从某个models中获取数据,则必须在@connect中进行绑定,不管这个models是在同包下还是别的包下。因为每个models的namespace具有唯一性,所以可以任意绑定:
@connect(({ activity, stadiumList, loading }) => ({
activity,
stadiumList,
submitting: loading.effects['activity/apiUpdateActivity2'],
}))
@Form.create()
class UpdateActivity extends PureComponent
可以看到,我定义了一个UpdateActivity的组件,该组件返回的是一个页面,该页面需要用到两个models中的数据,这两个models的namespace分别是:activity、stadiumList。正如上面所述,想要访问不同models,必须要在@connect中显式的生声明这两个models的namespace。
二、从models中取数据
然后要从中去数据的话,可行的办法有:
(1)只需要从里面读一个数据
const {
activity: { stadiumId },
} = this.props;
这是从命名控件为activity的models中取出list这个数据(要知道,models只是装填数据的容器,就算绑定了这个models,它也不会将数据传给你,只能你自己主动的去取。但要注意,没有绑定的话,是访问不到这个models的)
(2)需要从里面读很多数据
const { activity } = this.props;
我可以直接从this.prop中取出这个models的全部内容,可以像以下这么用:
activity.id;
acitvity.name;
activity.list
等等
只要在这个models里的state里面定义了数据(如:id、name、list等),则都可以被访问到。
(3)models中的数据可以被绑定它的组件修改
onChange4 = e => {
const { activity } = this.props;
activity.id = e.target.value;
};
onChange5 = e => {
const { activity } = this.props;
activity.label = e.target.value;
};
onChange6 = e => {
const { activity } = this.props;
activity.title = e.target.value;
};
如上述代码所示,每个onChange方法均是Input框在触发onChange属性的时候调用的,可以看到,我先像(2)一样,从全局props中取出绑定的models,然后通过“activity.”的方式进行赋值。然后在提交表单时,我会在dispatch中这样写:
handleSubmit = e => {
const { dispatch } = this.props;
const {
activity: {
allowWish,
contactPhone,
content,
id,
label,
title,
tips,
holdOrganization,
locationDes,
stadiumId,
},
} = this.props;
dispatch({
type: 'activity/apiUpdateActivity2',
payload: {
allowWish,
contactPhone,
content,
id,
label,
title,
tips,
holdOrganization,
locationDes,
stadiumId
}
可以看到,我从models中取出这些被改变了的数据,并调用相应接口。这样做的好处就是,我不需要在本页面(即组件)的state中再定义一大堆数据,简化了代码。
注意:不同组件在互相通信时,需要在models中定义要传递的变量。而组件与后端通信时,不必在models中写出相应的变量,但通常可以显式的写出来,增加代码的可读性
Ant Design框架中不同的组件访问不同的models中的数据的更多相关文章
- 关于Vue中页面(父组件)下拉,页面中的子组件加载更多数据的实现方法
一个项目中存在很多这种情况:父组件(页面)中的子组件需要做下拉加载更多的需求,但是这个下拉到底部的动作只能通过监控页面(父组件)来完成 这就需要父子组件之间的通信,代码如下: 1. 建立一个用于父子组 ...
- Ant Design Pro 学习三 新建组件
在 src/components 下新建一个以组件名命名的文件夹,注意首字母大写 在使用组件时,默认会在 index.js 中寻找 export 的对象,如果你的组件比较复杂,可以分为多个文件,最后在 ...
- vue中使用分页组件、将从数据库中查询出来的数据分页展示(前后端分离SpringBoot+Vue)
文章目录 1.看实现的效果 2.前端vue页面核心代码 2.1. 表格代码(表格样式可以去elementui组件库直接调用相应的) 2.2.分页组件代码 2.3 .script中的代码 3.后端核心代 ...
- Ant Design(ui框架)
官方文档:https://ant.design/docs/react/introduce-cn 说明:Ant Design 是一个 ui框架,和 bootstrap 一样是ui框架.里面的组件很完善, ...
- 如何用 Blazor 实现 Ant Design 组件库
本文主要分享我创建 Ant Design of Blazor 项目的心路历程,已经文末有一个 Blazor 线上分享预告. Blazor WebAssembly 来了! Blazor 这个新推出的前端 ...
- Vue框架——页面组件中使用小组件
小组件在components文件夹中,页面组件在views文件夹中 一.先写小组件的vue,比如text.vue(在template设置模板渲染,style设置样式) <template> ...
- React+Ant Design设置左侧菜单导航路由的显示与隐藏(与权限无关)
最近在学习react时,用到了很流行的UI框架Ant Design,也了解了一下Ant Design Pro,发现它们都有导航组件,Ant Design框架的导航菜单在这里,Ant Design Pr ...
- Ant Design项目记录和CSS3的总结和Es6的基本总结
这里主要是介绍自己运用ANT框架的一些小总结,以前写到word里,现在要慢慢传上来, 辅助生殖项目总结:从每个组件的运用的方法和问题来总结项目. 1.项目介绍 辅助生殖项目主要运用的是Ant.desi ...
- ant design pro(一)安装、目录结构、项目加载启动【原始、以及idea开发】
一.概述 1.1.脚手架概念 编程领域中的“脚手架(Scaffolding)”指的是能够快速搭建项目“骨架”的一类工具.例如大多数的React项目都有src,public,webpack配置文件等等, ...
随机推荐
- css设置Overflow实现隐藏滚动条的同时又可以滚动
.scroll-list ul{ white-space: nowrap; -webkit-overflow-scrolling: touch; overflow-x: auto; overflow- ...
- Android Studio(二):快捷键设置、插件安装
Android Studio相关博客: Android Studio(一):介绍.安装.配置 Android Studio(二):快捷键设置.插件安装 Android Studio(三):设置Andr ...
- Project Euler Problem 21-Amicable numbers
先说最暴力的算法,直接对一万内的每个数字暴力分解因子(对每个数字的时间复杂度是O(sqrt(n)的),然后,用个数组记录下来因子和,然后寻找 亲密数. 好一点:要先打个素数表,然后对每个数字,分解素因 ...
- phpstudy2016安装redis扩展
第一步:查看phpstudy版本 第二步:查看phpinfo信息,看Architecture所属类型. 第三步:下载redis扩展 去http://windows.php.Net/downloads/ ...
- SuperSocket根据条件获取 Session
如果你有一个自定义的属性 "CompanyId" 在你的 AppSession 类之中,如果你想要获取这个属性等于某值的 的所有 Session, 你可以使用 AppServer ...
- 《Spring 5官方文档》 Spring AOP的经典用法
原文链接 在本附录中,我们会讨论一些初级的Spring AOP接口,以及在Spring 1.2应用中所使用的AOP支持. 对于新的应用,我们推荐使用 Spring AOP 2.0来支持,在AOP章节有 ...
- Linux创建用户、设置密码、修改用户、删除用户命令
与大家分享下Linux系统中创建用户.设置密码.修改用户.删除用户的命令,希望对你有所帮助. useradd testuser 创建用户testuserpasswd testuser 给已创建的用 ...
- 清除SVN未版控文件
用Git时,git clean -df 可以清除所有没有add的文件,得到一个干净的工作空间. 用SVN没有这样的命令,当然可以 svn export 得到一个干净的工作空间,但会花很长时间,而且没有 ...
- H3C IPv6地址自动配置
- SpringBoot项目改变图片临时文件的存储路径
springboot项目,部署到服务器后,运行一段时间后,处理文件上传的接口时,后报异常. Could not parse multipart servlet request; nested exce ...