ES6/Antd 代码阅读记录

1、函数组件数据类型　　

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

?

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

　　

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

?

1 2 3 4 5 6 7 8 9 10 11

//其中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、解构时变更变量名称　

?

1 2 3 4 5 6

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

 

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

?

1 2 3 4 5

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，形成一个对象

?

1 2 3

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页码的函数

　　

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68

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>      </>    );  };