在React和Typescript中使用三元运算符的正确方法是什么

Question

我目前正在使用此代码：

      render: props.columnLinks[key]
        ? ((text): ReactElement => <a href={props.columnLinks[key]}>{text}</a>)
        : undefined,

但是我想使用&&运算符简化语句。但是，当我这样做时，Typescript会引发错误，包括：

Type 'false' is not assignable to type '((text: any, record: TableDataPoint, index: number) => ReactNode) | undefined'

如何像使用Javascript那样构造它？

非常感谢。

Answer 1

您的三元函数失败，因为当不满足您的条件时，您正在将属性设置为false，而不是表达式。

您可能会从reading the documentation中获得一些好处-React提供了一些更常见的技术，并通过简单的代码示例进行了解释。至少，它可以帮助您缩小对此类问题的定义，或者意识到您进行条件渲染的方法并不是阻力最小的方法！

在JavaScript中，true && expression始终取值为expression，而false && expression始终取值为false。换句话说，您的表达式只有在三元运算符右侧时才会被求值。在这种情况下，您的类型（((text: any, record: TableDataPoint, index: number) => ReactNode) | undefined'）不能为false。当您尝试将其设置为false时，它会正确地警告您这是不允许的。

如果您的目标是条件渲染，则可以将逻辑移入HTML吗？否则，我将在其他地方处理您的null检查，以便您可以更好地控制该属性的计算结果。