React Native：你能根据字符串的存在有条件地渲染 JSX 吗？

Posted 2023-02-22

【中文标题】React Native：你能根据字符串的存在有条件地渲染 JSX 吗？

【英文标题】：React Native: Can you conditionally render JSX based on the existence of a string?

【发布时间】：2020-08-07 01:10:54

【问题描述】：

在我的 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>

我认为问题在于使用第一种方法时，它试图实际呈现字符串，而不是检查它的存在。不过我想使用第一种方法，因为它更简洁，而且我在代码的其他地方使用了相同的约定。

有谁知道是否可以像这样使用&& 而不是?+:？

【问题讨论】：

你总是可以制作一个组件const OptionalTextString = (string) => string ? <Text>string</Text> : null;

&& 运算符返回虚假值的短路。例如assert(typeof ('' && 1), 'string')，所以如果是空字符串，它将返回空字符串。您可以将条件转换为布尔值。试试!!someString && <Text>someString</Text>

【参考方案1】：

这是因为 empty 字符串是 false-y 意味着它将在组件中呈现。如果不将字符串包装在 Text 组件中，则无法呈现字符串（即使是像 '' 这样的空字符串）。

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

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