❝
在工作中我们会经常使用
技巧
和黑魔法
,本篇主要讲两个,希望能帮助到大家!文章内容看情况而定,不一定是
React
里面专属的!❞
TS动态取数据
这里其实也不知道起什么标题,具体还是看内容吧。
平常做法(JS)
在JS
中,我经常使用对象去定义数据
,然后去获取它,像下面这样
// 订单状态
// 只是举个栗子 不代表真实订单状态就是这样
const statusData = {
1:"待支付",
2:"已支付",
3:"已完成",
4:"已取消",
5:"已评价"
}
// 中文状态
// status 是后端给的
const statusText = statusData[status] || "无效订单"
或者是下面这种
// 订单状态
// 只是举个栗子 不代表真实订单状态就是这样
const statusData = {
"WAITING":"待支付",
"PAID":"已支付",
"FINISHED":"已完成",
"CANCELED":"已取消",
"EVALUATED":"已评价"
}
// 中文状态
// status 是后端给的
const statusText = statusData[status] || "无效订单"
上面这两种的区别是状态是否是数字形式的
,其他的是类似的
TS中
在TS
中上述方法都不行,会提示错误的,虽然没有实质影响
,但是红杠提示就很难受!
第一种数字
const status:number = 1
const statusData = {
1:"待支付",
2:"已支付",
3:"已完成",
4:"已取消",
5:"已评价"
}
console.log(statusData[status])
错误提示
第二种字符串
const status:string = "WAITING"
const statusData = {
"WAITING":"待支付",
"PAID":"已支付",
"FINISHED":"已完成",
"CANCELED":"已取消",
"EVALUATED":"已评价"
}
console.log(statusData[status])
错误提示
解决办法
数字类型
使用数组代替对象
这样其实取的就是数组的下标了
const status:number = 1
const statusData = [null,"待支付","已支付","已完成","已取消","已评价"]
const statusText = statusData[status] || "无效订单"
字符串类型
enum statusData {
WAITING="待支付",
PAID="已支付",
FINISHED="已完成",
CANCELED="已取消",
EVALUATED="已评价"
}
type statusDataKey = keyof typeof statusData;
const status:statusDataKey = "WAITING"
const statusText = statusData[status]
这种方式就是先定义枚举
,然后使用keyof typeof
获取一个字符串字面量联合类型
即上述的"WAITING" | "PAID" | "FINISHED" | "CANCELED" | "EVALUATED"
这样status的类型就符合对应的了
额外多嘴一下:
有些时候数字状态并没有我们想象的那么简单怎么办
比如后端是1、5、7、100
,那我使用数组岂不是很麻烦也不优雅
我们可以采取上述字符串的方法,把后端的状态转化为ORDER_1、ORDER_5、ORDER_7
等
只有连续的纯数字使用数组才方便一点!
antdesign弹框按钮隐藏的问题
这里有多种解决方案,我是之前有按钮的情况
下,后期加上了无按钮
情况的显示,采取的最小改动
原逻辑
const ReactDemo = () => {
const cancle = () => {
// 关闭逻辑
}
const handleFinish = () => {
// 确定按钮逻辑
}
return (
<Modal
title="我是弹框"
width="1200"
open={true}
maskClosable={false}
destroyOnClose={true}
centered={true}
onCancel={cancle}
onOk={handleFinish}
>
</Modal>
)
}
上述示例是React
中使用ant design
里面Model
弹框组件的基本示例
先如今我们要增加某种情况下隐藏底部确定取消按钮
,这里有多种方案
footer自定义
当footer={null}
时底部将不存在,我们可以做一下改变
const ReactDemo = () => {
const cancle = () => {
// 关闭逻辑
}
const handleFinish = () => {
// 确定按钮逻辑
}
// 是否显示底部
const flag = true
return (
<Modal
title="我是弹框"
width="1200"
open={true}
maskClosable={false}
destroyOnClose={true}
centered={true}
footer={footer ? (
<Button onClick={cancle}>取消</Button>
<Button onClick={handleFinish}>确定</Button>
) : null}
>
</Modal>
)
}
上面是简单的书写,并未有样式和相关逻辑调整,也能实现效果,但可能还需要调整方法内部
,比如loading状态等
障眼法
我采用的是这种方式,直接障眼法,隐藏按钮
const ReactDemo = () => {
const cancle = () => {
// 关闭逻辑
}
const handleFinish = () => {
// 确定按钮逻辑
}
// 是否显示底部
const flag = true
return (
<Modal
className={flag ? 'noFooter' : ''}
title="我是弹框"
width="1200"
open={true}
maskClosable={false}
destroyOnClose={true}
centered={true}
onCancel={cancle}
onOk={handleFinish}
>
</Modal>
)
}
.noFooter .ant-modal-footer{
display: none;
}
这里最好在确定事件加上处理,但不需要考虑之前的逻辑
// 确定时间处理
const handleFinish = () => {
// 确定按钮逻辑
if(!flag) return
// 之前的逻辑
}
具体还是看改动量吧!
如果感觉有帮助,麻烦3连(关注、赞、在看),谢谢! 后面会更新更多。
关注公众号了解更多
标签:status,实用,逻辑,const,支付,TS,React,按钮,statusData From: https://blog.51cto.com/u_16123566/7597759