React & TS 里面两个实用小技巧

❝

在工作中我们会经常使用技巧和黑魔法，本篇主要讲两个，希望能帮助到大家!

文章内容看情况而定，不一定是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连(关注、赞、在看)，谢谢! 后面会更新更多。

关注公众号了解更多