使用falsey值在React Native中进行条件渲染的问题

Question

<Item stackedLabel disabled>
  <Label style={{ color: 'black' }}>{someLabel}</Label>
    {
      0 &&
      <Input style={{ color: 'grey' }} value={this.props.someprop} disabled />
    }
</Item>

我创建了一个snack，演示我们可以使用falsey值进行条件渲染。但是，上面的代码给我带来了错误

不变违规：文本字符串必须在组件中呈现

但是，如果我们用0 / null取代false那么它的工作正常吗？

Answer 1

我创建了一个小吃，演示我们可以使用falsey值进行条件渲染。

小吃失败了，所以事实并非如此。

扩展Saeed的答案，代码片段相当于

<Item stackedLabel disabled>
  <Label style={{ color: 'black' }}>{someLabel}</Label>
  0
</Item>

React Native不知道如何处理零，因此会输出错误。

Answer 2

那是因为React将0视为字符串。

只需使用此技巧将其转换为布尔值：

!!（任何不是布尔值）

// this is equal to false
!!(0)