1、将后端⽤户列表转换成前端⽤户列表,但只保留启⽤状态的⽤户。
function transform(users?: BackendUser[]): FrontendUser[] {
if (!users) {
return [];
}
const frontendUsers: FrontendUser[] = users
.filter(user => user.disabled === false)
.map(user => ({
value: user.id,
label: user.name,
}));
return frontendUsers;
}
2、利⽤弹窗 API Modal.confirm({ onOk: Function, onCancel: Function }) 封装⼀个 confirm 函数, 满⾜以下使⽤条件
type ConfirmOptions = {
onOk?: () => void;
onCancel?: () => void;
};
function confirm(options: ConfirmOptions): Promise<boolean> {
return new Promise((resolve, reject) => {
Modal.confirm({
onOk: () => {
if (options.onOk) {
options.onOk();
}
resolve(true);
},
onCancel: () => {
if (options.onCancel) {
options.onCancel();
}
reject(false);
},
});
});
}
3、实现⼀个计数器 hooks,执⾏该 hooks 返回 increase ⽅法和 count 状态,调⽤ increase 则 count ⾃增 1。在 MyComponent 组件中使⽤该⾃定义 hooks:点击 button 调⽤ increase,span 展示 count 值
// 自定义hooks
function useCounterCount() {
const [count, setCount] = useState(0);
const increase = () => {
setCount(count + 1);
};
return { count, increase };
}