ant design pro + typescript 使用

1. layouts里面的布局容器接收的props由什么决定？

umi框架决定的

2. 使用ICON问题

ant-design-pro4.0 默认

3. menuDataRender 函数的意义？

// 通过通过对authority进行检查，来过滤 menuList 
const menuDataRender = menuList =>
  menuList.map(item => {
    const localItem = { ...item, children: item.children ? menuDataRender(item.children) : [] };
    return Authorized.check(item.authority, localItem, null);
  });

4. ant-design-pro中props中的loading意义

（1）这个 loading 是 dva 中的 dva-loading 完成的，可以直接通过connect传递给路由组件。在ant-design-pro中默认引入的

export default connect(({ link, loading }: any) => ({
  currentLinks: link.currentLinks,
  propLoading: loading
}))(Link);

（2）loading的结构

{
  global: false,
  models: {user: false, link: false},
  effects: [
    user/fetchCurrent: false,
    link/fetchLinks: false,
    link/fetchTest: false
  ]
}

（3）含义

• 当通过dispatch触发user model中的 fetchLinks 时，loading.effects['link/fetchLinks'] 就会变为true，当执行完毕以后就会变为falser。

if (dispatch) {
  dispatch({
    type: 'link/fetchLinks',
  });

  dispatch({
    type: 'link/fetchTest',
  });
}

• 当loading.effects中与link相关的属性有一个为true时，loading.modles.link 为 true，也就是说

loading.models.link = loading.effects['link/fetchLinks'] || loading.effects['link/fetchTest']

• loading.global

loading.global = loading.models.user || loading.models.link

5. 接口定义

把一个页面下面用到的公共接口放在文件下面对应的data.d.ts中并导出，接口如下：

pages
    Link
        data.d.ts

data.d.ts中导出的内容如下

export interface TypeKey {
  username: string;
  password: string;
}

6. 在函数组件中使用antd的表单

参考示例

需要使用到 wrappedComponentRef

// 部分示例
const TestForm = () => {
  const formRef = createRef<Ref>();
  return (
    <EnhancedFCForm
      onSubmit={() => console.log(formRef.current!.form.getFieldValue('name'))}
      wrappedComponentRef={formRef}
    />
  );
};

7. 向From.create创建的组件传递props

• 在通过From.create创建的时候就要设置props的类型

const Child = Form.create<FormProps>({ name: 'form' })(FormPart)

• FormProps的定义如下,FormComponentProps是ant定义的form相关的接口

import { FormComponentProps } from 'antd/lib/form/Form';

interface FormProps extends FormComponentProps {
  // 这里面的是 FormProps 自己包含的属性
  initForm: TypeKey | undefined
}

• 传递props，此时就可以传递属性为initForm的props

<Child wrappedComponentRef={formRef} initForm={initForm}/>