Строгая ошибка проверки типов на элементе JSX - PullRequest
Новая
       17

Строгая ошибка проверки типов на элементе JSX

0 голосов
/ 16 января 2019

Я создаю компонент React с Typescript, который имеет элемент div JSX с атрибутом 'style'. Одним из значений является цвет фона, и я извлекаю это значение из дерева состояний Mobx, например:

style={{backgroundColor: css.primaryColor}}

Однако это приводит к ошибке, что значение может быть неопределенным.

Обычно при вызове из дерева Mobx в TS я устанавливаю путь, равный переменной, а затем добавляю оператор if для удовлетворения этой пустой проверке, например: 

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

Итак, в функции рендеринга я попытался создать переменную с именем 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'}}
/>

Я все еще получаю 'Object is undefined' в 'css' в атрибуте стиля в VSCode.

Как я могу удовлетворить эту нулевую проверку? Нужно ли помещать весь оператор return внутри оператора if?

1 Ответ

0 голосов
/ 16 января 2019

Если целью является просто устранить ошибку, добавьте! после того, как переменная, о которой вы знаете, не является нулевой, для подавления этой ошибки. Это говорит Typescript, что объект не является нулевым.

, например 

<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
...