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

Question

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

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

Invariant Violation: Text strings must be rendered within a component

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

Answer 1

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

用这个技巧简单地将它转换为布尔值：

!!(任何非布尔值)

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

Answer 2

I've created a snack, to demo that we can use falsey value for conditional rendering.

而且点心失败了，其实不是这样的

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

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

React Native 不知道如何处理零，因此打印错误。

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

Problem with conditional rendering in React Native using falsey value

reactjs

react-native

native-base