zoukankan      html  css  js  c++  java
  • 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中写出相应的变量,但通常可以显式的写出来,增加代码的可读性

  • 相关阅读:
    verilog编码规范
    verilog代码 想法验证---与寄存器输出有关
    MMCM与PLL
    Vivado约束文件(XDC)的探究(2)
    Vivado约束文件(XDC)的探究(1)
    VGA图像显示组成模块分析
    关于Quad PLL /CPLL参考时钟的选择
    GTX的生成(包括COMMON)
    SD-SDI播出系统---使用GTX TX产生恢复时钟
    DRP端口描述
  • 原文地址:https://www.cnblogs.com/tian874540961/p/10224449.html
Copyright © 2011-2022 走看看