需求:由于在项目开发中,当需要使用该组件时都需要对该组件进行大量的代码输出,为了方便代码统一管理,减少冗余代码,所以将此组件进行二次封装。
其他成员在使用中只需将自己的设置通过对应的参数传递到该组件,在执行选中操作后直接将返回值回传给调用的父组件即可。
技术涉及:react+ts+antd
代码如下:
parent.tsx
import React from 'react';
import MonthPicker from '../components/DatePicker/children';
import moment from 'moment';
class FormsView extends React.Component {
constructor(props: {}) {
super(props)
this.state = {
}
}
getSelectMonth(data: any) {
console.log('获取选中的月份', data);
}
disabledDate1(current:any) {
// 设置不可选的日期
return current && current > moment().endOf('day');
}
render() {
return <div className="parent">
<MonthPicker data={new Date()}
getSelectMonth={this.getSelectMonth.bind(this)}
setDisableDate={this.disabledDate1.bind(this)}></MonthPicker>
</div>
}
}
export default FormsView