时间戳

首页 > 解决方案 > 将 If/Else 转换为三元 React Typescript

javascript - 将 If/Else 转换为三元 React Typescript

问题描述

我在 React 和 Typescript 中有一个项目，正在创建一个 Like 按钮并创建了一个 if/else 语句，如下所示：

  const [count, setCount] = useState(0);
  const [iconFill, setFill] = useState('gray');

  const favoriteCount = () => {
    if(iconFill == 'red') {
      setCount(count - 1 );
      setFill('gray');
    } 
    else {
      setCount(count + 1);
      setFill('red');
    }
  }

代码按预期工作，但我想知道是否有更简洁的编写方式，我尝试使用三元语句：

iconFill == 'red' ? setCount(count - 1 ) && setFill('gray') : setCount(count + 1) && setFill('red');

我不确定为什么这不会产生相同的结果，并且还会收到以下 Typescript 错误： An expression of type 'void' cannot be tested for truthiness

标签： javascriptreactjstypescript

解决方案

我认为您原来的现有代码很好 - 使用条件运算符不仅使它更难阅读，而且它也不合适，因为条件运算符意味着在您想要有条件地生成表达式时使用（但是这里的结果表达式没有被使用）。if/else更合适。

但是有一种替代方法可以使您的代码更简洁。因为它看起来像是iconFill在灰色和红色之间切换，所以将该状态设置为布尔值而不是字符串如何？然后你可以反转布尔值：

const [fillGray, setFillGray] = useState(true);
const favoriteCount = () => {
    setCount(count + (fillGray ? 1 : -1));
    setFillGray(!fillGray);
}

上面使用了条件运算符，但它在更合适的上下文中使用，因为结果被用作表达式（即计算为1or -1）而不是作为 if/else 的不适当替代。

推荐阅读