• react里面components + model连接数据的方式有两种 如果组件属于有状态组件,也就是类组件,则用@connect连接,这里值得是使用装饰器 @connect(({ saleProduct, distributor, loading }) => ({ saleProduct, ...

    react里面components + model连接数据的方式有两种

    • 如果组件属于有状态组件,也就是类组件,则用@connect连接,这里值得是使用装饰器
    @connect(({ saleProduct, distributor, loading }) => ({
      saleProduct,
      saleProductList: saleProduct.saleProductList,
      currentAccountDistributorList: distributor.currentAccountDistributorList,
      loadingSaleProductList: loading.effects['saleProduct/fetchSaleProductList'],
    }))

    @connect(({namespace})=>({namespace}))

    • 如果组件属于无状态组件,也就是函数组件,则用connect连接,这里值得是高阶函数连接
    export default connect(({ setting }) => ({
      contentWidth: setting.contentWidth,
    }))(PageHeaderWrapper);

    connect((namespace)=>({namespace})(componentsName))

    react里面取接口数据的方式  

    • 通过dispath触发model,然后model触发serves,然后serves返回response,然后reducers合并数据,更新state的值, 然后组件可以直接使用model里面state的值
    • 还有一种方法可以获取接口返回值,通过dispatch的callback回调获取值,这时候获取的值,可以setState改变组件的状态,如果是通过@connect里面获取的值,由于是props拿到的,props改变的时候回触发render函数,在render函数触发的时候,setState会失效,所以请看需要选择。
    const { dispatch } = this.props;
    dispatch({
          type: 'distributor/fetchCurrentAccountDistributorList',
          payload: {},
          callback: res => {
            this.setState(
              {
                parentDistributorId: res[0].distributorId,
              },
              () => {
                dispatch({
                  type: 'saleProduct/fetchSaleProductList',
                  payload: {
                    pageNo: 1,
                    pageSize: 10,
                    distributorId: res[0].distributorId,
                  },
                  callback: response => {
                    this.setState({
                      total: response.total,
                      pageNo: response.pageNum,
                      pageSize: response.pageSize,
                    });
                  },
                });
              }
            );
          },
        });

     

    展开全文
  • 1.antd官网 ... 2、React使用Antd 1)、安装antd npm install antd --save / yarn add antd / cnpm install antd --save 2)、在react项目的css文件中引入Antd的css @import '~antd/...
  • 启动 启动文件: app/src/index.js 加载全局数据模型./models/global ...import React from 'react'; import { routerRedux, Route, Switch } from 'dva/router'; import { LocaleProvider } from ...
  • React+Ant Design Pro初学 2020-04-13 10:16:20
    最近因为工作原因看了一些前端框架的知识,之前没太接触过这方面的内容,所以有点凌乱,梳理一下写篇文章记录一下,文中的很多链接都是直接导向对应位置的,挺... 菜鸟教程:https://www.runoob.com/react/react-tut...
  • 1.可查看官网https://pro.ant.design/docs/getting-started-cn 2.如果按照官网步骤安装失败,则尝试一下步骤。 1)先手动安装create-umi cnpm install create-umi 2)执行一下命令 npm create umi 会出现...
  • React-ant Design引入和使用 2020-05-27 23:57:30
    1、下载antd和antd-mobile cnpm i antd antd-mobile --save-dev 2、安装插件 cnpm i react-app-...把 "script" 下的 react-scripts 全部改成 react-app-rewired "scripts": { "start": "react-app-rewire
  • react配置Ant Design步骤解析 2020-06-19 10:32:00
    react项目很多时候都会用到antd,那么我们在舒服的使用antd前要如何进行配置? 接下来笔者会随着大家一起去做。 首先确保有一个react项目 安装antd npm i antd -S 安装按需加载组件代码和样式的插件 npm i ...
  • react+Ant Design错误信息 2019-04-24 16:17:39
    项目中使用react+Ant Design,报错信息如下: 页面使用Ant Design里面的Tabs标签页嵌套Collapse折叠面板 解决方法,如下图片:
  • 1.如果你熟悉 HTML,那么 JSX 对于你来说是没有任何压力的,因为 HTML 中的所有标签,在 JSX 中都是支持的,基本上没有学习成本,只有如下几点略微的不同: class 属性变为 className tabindex 属性变为 ...
  • react的滑动图片验证,是基于...1.将css的改为less,适配ant design 2.将图片进行初次加载就执行裁剪的方法 3.适配手机的滑动事件 // index.js /** * @name Index * ...
  • 与服务器交互 对接接口 如果是get请求,如下图所示: 搞了我好几个小时,终于搞明白了
  • 看了网上很多基于React+Ant Design后台管理系统解决方案,个人感觉有些过重,整合了太多东西进去,例如富文本组件,markdown,Echarts,甚至还有AntD表格的使用demo...... 或许你只想要一个拿来就能用,除了修改项目...
  • 前言这篇文章主要根据自己最近一个月从学习react到最近实际使用ant-design-pro,谈一谈自己的使用心得,个人见解有误的地方望大家指正!1、为什么要选择ant-design-pro?其实我来目前公司之前,公司前端技术栈是vue+...
  • Ant Design Pro 是一个企业级中后台前端/设计解决方案。本地环境需要安装node和git,技术栈基于ES2015+、React、dva、g2和antd。 参考:https://dvajs.com/ ...
  • Ant Design Pro是一个企业级中后台前端/设计解决方案,秉承了 Ant Design 的设计价值观,致力于在...总之,Ant Design Pro是一套基于 React 的中后台管理控制台的脚手架,可以帮助你快速搭建企业级中后台产品原型。
  • Ant Design 是一个致力于提升『用户』和『设计者』使用体验的中台设计语言。它模糊了产品经理、交互设计师、视觉设计师、前端工程师、开发工程师等角色边界,将进行 UE 设计和 UI 设计人员统称为『设计者』,利用...
  • React引入ant-design实现正在加载效果 1.安装 npm install antd --save 2.导入ant-design // 导入ant design import { Spin, Icon } from 'antd'; import 'antd/dist/antd.css'; const antIcon = &...
  • step1、 npm install antd --save step2、npm install babel-plugin-import --save-dev step3、分别在config/webpack.config.dev.js、config/webpack.config....https://github.com/ant-design/babel-plugin-...
  • 参考: ...Electron:作为Native支持的项目搭建 React:作为前端界面框架 Ant-Design作为UI库 安装Electron 使用npm的方式进行全局安装,因为electron有自己的命令行工具,所以使用全局安装 electron安装...
  • react + ant.design 中 使用getFieldDecorator 可以这样使用默认值: this.props.form.setFieldsValue({ realName: response.data.data.realname, phoneVal: response.data.data.mobile, mailVal:resp...
1 2 3 4 5 ... 20
收藏数 2,448
精华内容 979