Выражения внутри свойства 'source' компонента <Image> в React Native
В React Native я могу
<Image
source = {
require(<image uri>)
}
/>
и я могу использовать тернарный оператор вот так
<Image
source = {
true ? require(<image uri>) : require(<other image uri>)
}
/>
но я не могу, например, это сделать
<Image
source = {
if (true) {
require(<image uri>)
}
}
/>
Фактически, мой редактор кода (VsCode) затеняет «истинное» ключевое слово. Понятно, что я не могу использовать подобные выражения в поле «источник», но может ли кто-нибудь дать мне объяснение, какое именно правило здесь? Неужели это так просто? Или вы можете указать мне на какие-либо ресурсы, которые углубляются в спецификацию по этому поводу?
@ChrisG благодарит вас за быстрый ответ и за разъяснение разницы между выражениями и утверждениями. Чтобы было ясно, это просто JSX вообще нигде не поддерживает операторы? И «if () ...» - это оператор, тогда как «x? Y: z» - это выражение, которое JSX поддерживает, верно?
@gkeenley, это вроде правильно, но не только для JSX. Оператор (которому всегда предшествует ключевое слово, например if, return, try, switch и т. д.) Никогда не может использоваться там, где ожидается значение. Например, x ? return y: return z недействителен, потому что return - это оператор, а тернарный оператор ожидает значение. Другой пример - function(if (x){ val1 } else { val2 } ). Поскольку оператор функции ожидает значение, это недопустимо. Поскольку скобки JSX ожидают значения, они принимают только выражения, но не операторы. Надеюсь, это поможет прояснить это!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Попробуй это:
var bShow = true or false
<Image
source = {
true && require(<image uri>)
}
/>
Фактически вы можете использовать выражения, но
if () ...не является выражением. JSX не поддерживает операторы и тому подобное, но вы можете сделать все это в методеrender()перед возвратом JSX. (чтобы было ясно: выражение - это все, что оценивается в один int / object / text / и т. д.)