ES6/Antd 代码阅读记录

1、函数组件数据类型　　

　　//UpdateFormProps就是组件的props数据类型

const UpdateForm: React.FC<UpdateFormProps> = (props) => {}

　　

2、Hooks之 useState，这里记录两个地方，一个是数据类型，一个是设置状态函数　

//其中FormValueType 代表的是state中的数据类型，setFormVals用来更新组件状态的函数
  const [formVals, setFormVals] = useState<FormValueType>({
    name: props.values.name,
    desc: props.values.desc,
    key: props.values.key,
    target: '0',
    template: '0',
    type: '1',
    time: '',
    frequency: 'month',
  });

3、解构时变更变量名称　

 const {
    onSubmit: handleUpdate,//解构后将原对象中的变量onSubmit重新命名为handleUpdate，注意写法
    onCancel: handleUpdateModalVisible,
    updateModalVisible,//解构后保持变量名名称
    values,
  } = props;

 

4、变量拷贝和合并，可以将多个对象放到一起为一个对象，注意（...val）

const kk = {"name":"Yungui","age":25}
const kk1 = {"name1":"Yungui","age1":25}

const val={...kk,...kk1}
  {name: "Yungui", age: 25, name1: "Yungui", age1: 25}//新变量

 

5、async和await的组合使用

 

6、变量名作为key，形成一个对象

const kk = {"name1":"Yungui","age1":25}
const kk1 = {"name1":"Yungui","age1":25}
let m = {kk,kk1}
m={kk: {name1: "Yungui", age1: 25},kk1: {name1: "Yungui", age1: 25}}

　

 7、渲染HTML页码的函数

　　

 const renderContent = () => {
    if (currentStep === 1) {
      return (
        <>
          <FormItem name="target" label="监控对象">
            <Select style={{ width: '100%' }}>
              <Option value="0">表一</Option>
              <Option value="1">表二</Option>
            </Select>
          </FormItem>
          <FormItem name="template" label="规则模板">
            <Select style={{ width: '100%' }}>
              <Option value="0">规则模板一</Option>
              <Option value="1">规则模板二</Option>
            </Select>
          </FormItem>
          <FormItem name="type" label="规则类型">
            <RadioGroup>
              <Radio value="0">强</Radio>
              <Radio value="1">弱</Radio>
            </RadioGroup>
          </FormItem>
        </>
      );
    }
    if (currentStep === 2) {
      return (
        <>
          <FormItem
            name="time"
            label="开始时间"
            rules={[{ required: true, message: '请选择开始时间！' }]}
          >
            <DatePicker
              style={{ width: '100%' }}
              showTime
              format="YYYY-MM-DD HH:mm:ss"
              placeholder="选择开始时间"
            />
          </FormItem>
          <FormItem name="frequency" label="调度周期">
            <Select style={{ width: '100%' }}>
              <Option value="month">月</Option>
              <Option value="week">周</Option>
            </Select>
          </FormItem>
        </>
      );
    }
    return (
      <>
        <FormItem
          name="name"
          label="规则名称"
          rules={[{ required: true, message: '请输入规则名称！' }]}
        >
          <Input placeholder="请输入" />
        </FormItem>
        <FormItem
          name="desc"
          label="规则描述"
          rules={[{ required: true, message: '请输入至少五个字符的规则描述！', min: 5 }]}
        >
          <TextArea rows={4} placeholder="请输入至少五个字符" />
        </FormItem>
      </>
    );
  };