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中的数据的更多相关文章

  1. 关于Vue中页面(父组件)下拉,页面中的子组件加载更多数据的实现方法

    一个项目中存在很多这种情况:父组件(页面)中的子组件需要做下拉加载更多的需求,但是这个下拉到底部的动作只能通过监控页面(父组件)来完成 这就需要父子组件之间的通信,代码如下: 1. 建立一个用于父子组 ...

  2. Ant Design Pro 学习三 新建组件

    在 src/components 下新建一个以组件名命名的文件夹,注意首字母大写 在使用组件时,默认会在 index.js 中寻找 export 的对象,如果你的组件比较复杂,可以分为多个文件,最后在 ...

  3. vue中使用分页组件、将从数据库中查询出来的数据分页展示(前后端分离SpringBoot+Vue)

    文章目录 1.看实现的效果 2.前端vue页面核心代码 2.1. 表格代码(表格样式可以去elementui组件库直接调用相应的) 2.2.分页组件代码 2.3 .script中的代码 3.后端核心代 ...

  4. Ant Design(ui框架)

    官方文档:https://ant.design/docs/react/introduce-cn 说明:Ant Design 是一个 ui框架,和 bootstrap 一样是ui框架.里面的组件很完善, ...

  5. 如何用 Blazor 实现 Ant Design 组件库

    本文主要分享我创建 Ant Design of Blazor 项目的心路历程,已经文末有一个 Blazor 线上分享预告. Blazor WebAssembly 来了! Blazor 这个新推出的前端 ...

  6. Vue框架——页面组件中使用小组件

    小组件在components文件夹中,页面组件在views文件夹中 一.先写小组件的vue,比如text.vue(在template设置模板渲染,style设置样式) <template> ...

  7. React+Ant Design设置左侧菜单导航路由的显示与隐藏(与权限无关)

    最近在学习react时,用到了很流行的UI框架Ant Design,也了解了一下Ant Design Pro,发现它们都有导航组件,Ant Design框架的导航菜单在这里,Ant Design Pr ...

  8. Ant Design项目记录和CSS3的总结和Es6的基本总结

    这里主要是介绍自己运用ANT框架的一些小总结,以前写到word里,现在要慢慢传上来, 辅助生殖项目总结:从每个组件的运用的方法和问题来总结项目. 1.项目介绍 辅助生殖项目主要运用的是Ant.desi ...

  9. ant design pro(一)安装、目录结构、项目加载启动【原始、以及idea开发】

    一.概述 1.1.脚手架概念 编程领域中的“脚手架(Scaffolding)”指的是能够快速搭建项目“骨架”的一类工具.例如大多数的React项目都有src,public,webpack配置文件等等, ...

随机推荐

  1. css设置Overflow实现隐藏滚动条的同时又可以滚动

    .scroll-list ul{ white-space: nowrap; -webkit-overflow-scrolling: touch; overflow-x: auto; overflow- ...

  2. Android Studio(二):快捷键设置、插件安装

    Android Studio相关博客: Android Studio(一):介绍.安装.配置 Android Studio(二):快捷键设置.插件安装 Android Studio(三):设置Andr ...

  3. Project Euler Problem 21-Amicable numbers

    先说最暴力的算法,直接对一万内的每个数字暴力分解因子(对每个数字的时间复杂度是O(sqrt(n)的),然后,用个数组记录下来因子和,然后寻找 亲密数. 好一点:要先打个素数表,然后对每个数字,分解素因 ...

  4. phpstudy2016安装redis扩展

    第一步:查看phpstudy版本 第二步:查看phpinfo信息,看Architecture所属类型. 第三步:下载redis扩展 去http://windows.php.Net/downloads/ ...

  5. SuperSocket根据条件获取 Session

    如果你有一个自定义的属性 "CompanyId" 在你的 AppSession 类之中,如果你想要获取这个属性等于某值的 的所有 Session, 你可以使用 AppServer ...

  6. 《Spring 5官方文档》 Spring AOP的经典用法

    原文链接 在本附录中,我们会讨论一些初级的Spring AOP接口,以及在Spring 1.2应用中所使用的AOP支持. 对于新的应用,我们推荐使用 Spring AOP 2.0来支持,在AOP章节有 ...

  7. Linux创建用户、设置密码、修改用户、删除用户命令

    与大家分享下Linux系统中创建用户.设置密码.修改用户.删除用户的命令,希望对你有所帮助. useradd testuser  创建用户testuserpasswd testuser  给已创建的用 ...

  8. 清除SVN未版控文件

    用Git时,git clean -df 可以清除所有没有add的文件,得到一个干净的工作空间. 用SVN没有这样的命令,当然可以 svn export 得到一个干净的工作空间,但会花很长时间,而且没有 ...

  9. H3C IPv6地址自动配置

  10. SpringBoot项目改变图片临时文件的存储路径

    springboot项目,部署到服务器后,运行一段时间后,处理文件上传的接口时,后报异常. Could not parse multipart servlet request; nested exce ...