JSX元素上的嚴格Null檢查打字稿錯誤

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'上得到'Object is not undefined'。

我如何滿足該空檢查？ 我是否需要將整個return語句放在if語句內？

Answer 1

如果只想消除錯誤，請添加！ 在您知道的變量不為null的變量之后以平息此錯誤。這告訴Typescript對象不為null。

例如

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

如果您想學習如何在Typescript中使用內聯樣式，請參見以下鏈接：

1. https://medium.com/@zvona/react-native-and-typescript-meets-styles-b727ecf7e677
2. https://blog.blueberry.io/how-we-handle-inline-styles-with-typescript-and-react-2c257e039f2b