Проблема с условным рендерингом в React Native с использованием значения falsey
<Item stackedLabel disabled>
<Label style = {{ color: 'black' }}>{someLabel}</Label>
{
0 &&
<Input style = {{ color: 'grey' }} value = {this.props.someprop} disabled />
}
</Item>
Я создал перекус, чтобы продемонстрировать, что мы можем использовать значение falsey для условного рендеринга. Однако приведенный выше код выдает мне ошибку
Invariant Violation: Text strings must be rendered within a component
Однако, если мы заменим 0 на null / false, тогда он будет работать нормально?
Ответы 2
Это потому, что React видит этот 0 как строку.
Просто преобразуйте его в логическое значение с помощью этого трюка:
!! (ничего не логическое)
// this is equal to false
!!(0)
В ReactJS (не родном) он обрабатывает 0 как строку. Таким образом, он принимает это как строку
I've created a snack, to demo that we can use falsey value for conditional rendering.
А закуска не получается, так что на самом деле дело обстоит не так.
Расширяя ответ Саида, фрагмент кода является эквивалентом
<Item stackedLabel disabled>
<Label style = {{ color: 'black' }}>{someLabel}</Label>
0
</Item>
React Native не знает, что делать с нулем, и поэтому выводит ошибку.
Я не понимаю? Какая часть закуски не подходит?
Когда вы запускаете симулятор, вы не видите Change code in the editor and watch it change on your phone! Save to get a shareable url. из-за 0, что явно ожидается
@Isaac запустите закуску на android и вы увидите ошибку
хммм, похоже, действительно так. Спасибо, что дал мне знать!
Не совсем, поэтому я создал
snack, чтобы продемонстрировать, чтоReactправильно обрабатывает 0 как ложное значение. Однако я не могу быть уверен, что это проблема NativeBase.