javascript - 对空字符串使用条件渲染

Question

我有一些读取对象的 react native 代码。如果一个对象有一个特定的属性，我希望它显示代码。最小化的代码块如下所示:

return <View>
      <Text>Title</Text>
      {item.mystring &&
               <View>
                     <Text>Should only be rendered when the mystring property exists and has a value</Text>
               </View>

       }
</View>

在大多数情况下它工作正常，但是，如果属性 mystring 确实存在但有一个空字符串，我会收到以下错误:

Invariant Violation: Text strings must be rendered within a <Text> component.

为什么我在空字符串上会收到此错误？我的偏好是不渲染代码块。

Answer 1

此技巧仅适用于 bool 值、null、undefined 和 0。即使字符串为空，React 也会尝试渲染该字符串。

您可以将变量转换为 bool 值:

{!!item.mystring &&
   <View>
         <Text>Should ...</Text>
   </View>
}

或者使用三元运算符

{item.mystring ?
   <View>
         <Text>Should ...</Text>
   </View>
  :
  null
}