Question

我正在用Typescript创建一个React组件，该组件具有一个带有'style'属性的div JSX元素。值之一是背景色，我正在从Mobx状态树中提取该值，如下所示：

style={{backgroundColor: css.primaryColor}}

但是，这会导致错误，表明该值可能未定义。

通常在TS中从Mobx树调用时，我将路径设置为变量，然后添加if语句来满足此空检查，如下所示：

const { store } = this.props
const currentBot = store.bots.current
if (currentBot) {
    do something
}

因此，在render函数中，我尝试创建一个名为css的变量，从中可以引用对象上的不同键（上例中为primaryColor）。这没有用，因为css仍可能是未定义的，所以我还尝试添加带有默认十六进制代码的OR运算符。

const { store } = this.props
const currentBot = store.bots.current
let css
if (currentBot) {
  css = currentBot.theme.css
}

...

<div
  style={{backgroundColor: css.primaryColor || '#707070'}}
/>

我仍然在VSCode的style属性中的'css'上得到'对象可能是未定义的'。

我如何满足该空检查？我是否需要将整个return语句放在if语句内？

Answer 1

如果要消除错误，请添加！在您知道的变量不为null的变量之后以解决此错误。这告诉Typescript对象不为null。

例如

<div
  style={{backgroundColor: css!.primaryColor || '#707070'}}
/>

如果您想学习如何在Typescript中使用内联样式，请参见以下链接-

JSX元素上的严格Null检查打字稿错误

1 个答案: