november-9th

发布日期: 2022-11-09

文章字数: 315

阅读时长: 1 分

阅读次数:

函数中执行异步操作

/**
  我们经常需要执行异步操作，但直接让执行函数变成一部函数，

  恐对其他语句造成影响，

  于是采用以下方式，

  单独抽离异步操作
*/

const handelchange = () => {
    ….
    …
    ..
    (async () => {
        await …       
    })()
}

antd 单向校验需要form.item的required属性先为true

经测试，

如果 form.item的属性required不为true，

form.validateFields(['bus']) 

那么单向校验不会生效。

select可直接给定options属性

该属性所对应的值是一个数组，

数组值为 {label: '', value: ''} 的格式，

与标签的展示效果一样。

React less 、scss通用选择器

经测试以下方式在less、scss都能生效，

使用时建议在 global 外层再报一层，

因为 global 是作用于全局的，

包一层就可避免影响其他组件。


:global {
    .ant-modal-content {
        height: 100%;
    }
}

ts中对象索引值分配问题

ts 中经常会出现把一个符合一个对象键的字符 （对象中有这个键）分配时报错的问题。

解决： 需要多写一个type类型。

export type CommonType = 'input' | 'select' | 'radio' | 'password' | 'textarea';

export interface FormItemProps {
    comType: CommonType;
    name: string;
    label: string;
    rules: Array<any>;
    required?: boolean;
    message?: string;
    attrs: any;
}

const RenderFormItem = (props: FormItemProps) => { 
  ...
  ..
const Tag = component[comType || 'input']; // props中使用了定义的类型 ，现在不会报错