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-y 意味着它将在组件中呈现。 如果不将字符串包装在 Text 组件中，则无法呈现字符串（即使是像''这样的空字符串）。

空字符串值遇到与数字相同的问题。 但是因为呈现的空字符串是不可见的，所以这不是您可能不得不处理的问题，甚至不会注意到。 但是，如果您是一个完美主义者并且不希望 DOM 中出现空字符串，您应该采取与我们在上面对数字所做的类似的预防措施。