React Native: Можете ли вы условно визуализировать JSX, основываясь на существовании строки?

Question

В моем приложении React Native я пытаюсь условно отобразить компонент <Text> в зависимости от того, существует ли конкретная строка. Я пытался сделать это так:

<View>
  {
    someString
    &&
    <Text>
      {someString}
    </Text>
  }
</View>

Это выкинуло ошибку Text strings must be rendered within a <Text> component. Я сделал это таким образом, и он работал нормально.

<View>
  {
    someString
    ?
    <Text>
      {someString}
    </Text>
    :
    null
  }
</View>

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

Кто-нибудь знает, возможно ли использовать && как этот вместо ? + :

Answer 1

Это потому, что строка empty имеет значение false, что означает, что она будет отображаться в компоненте. Вы не можете отобразить строку (даже пустую, например ''), не оборачивая ее в компонент Text.

https://www.freecodecamp.org/news/conditional-rendering-in-react-using-ternaries-and-logical-and-7807f53b6935/

Пусто Строковые значения имеют ту же проблему, что и числа. Но поскольку визуализированная пустая строка невидима, вам не придется сталкиваться с этой проблемой или даже заметить ее. Однако, если вы перфекционист и не хотите пустую строку в вашем DOM, вы должны принять те же меры предосторожности, что и мы для чисел выше.