Проблема с условным рендерингом в React Native с использованием значения falsey

Question

<Item stackedLabel disabled>
  <Label style={{ color: 'black' }}>{someLabel}</Label>
    {
      0 &&
      <Input style={{ color: 'grey' }} value={this.props.someprop} disabled />
    }
</Item>

Я создал snack , чтобы продемонстрировать, что мы можем использовать значение Falsey для условного рендеринга. Однако вышеприведенный код выдает мне ошибку

Нарушение инварианта: текстовые строки должны отображаться в компоненте

Однако, если мы заменим 0 на null / false, тогда все будет нормально?

Answer 1

Я создал закуску, чтобы продемонстрировать, что мы можем использовать значение Falsey для условный рендеринг.

И перекусить не получается, так что на самом деле это не так.

Расширяя ответ Саида, фрагмент кода является эквивалентом

<Item stackedLabel disabled>
  <Label style={{ color: 'black' }}>{someLabel}</Label>
  0
</Item>

React Native не знает, что делать с нулем, и поэтому печатает ошибку.

Answer 2

Это потому, что React видит этот 0 как строку.

Просто конвертируйте его в логическое значение с помощью этого трюка:

!! ( все, что не логично )

// this is equal to false
!!(0)