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={{ '100%' }}> <Option value="0">表一</Option> <Option value="1">表二</Option> </Select> </FormItem> <FormItem name="template" label="规则模板"> <Select style={{ '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={{ '100%' }} showTime format="YYYY-MM-DD HH:mm:ss" placeholder="选择开始时间" /> </FormItem> <FormItem name="frequency" label="调度周期"> <Select style={{ '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> </> ); };