Question

nav {
    text-align: center;
    width: 100%;
    height: 75px;
    background-color: #636363;
}
nav img {
    float: left;
    padding: 20px 20px;
}
nav span {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    color: #ffffff;
    width: 400px;
}
nav ul {
    float: right;
    z-index: 1; /* To keep the menu on top of the map */
}
nav ul li {
    float: left;
    list-style: none;
    position: relative;
}
nav ul li a {
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    color: #ffffff;
    font-size: 28px;
    padding: 15px 14px;
    text-decoration: none;
    padding: 10px 10px 15px 0px;

}
nav ul li ul {
    display: none;
    position: absolute;
    background-color: #636363;
    padding: 10px;
    right: 0;
    border-radius: 0px 0px 4px 4px;
}
nav ul li:hover ul{
    display: block;

}
nav ul li ul li {
    width: 150px;
    border-radius: 4px;
    position: relative;
}
nav ul li ul li a  {
    padding: 8px 14px;
}

nav ul li ul li a:hover {
    background-color: #585656;
}

/* style the map box */
#map{
      width:100%;
    height:500px;
}

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

永久违反：文本字符串必须在组件内呈现

但是，如果我们将<Item stackedLabel disabled> <Label style={{ color: 'black' }}>{someLabel}</Label> { 0 && <Input style={{ color: 'grey' }} value={this.props.someprop} disabled /> } </Item>替换为0 / null，那么它可以正常工作吗？

Answer 1

我已经创建了一个零食，以演示我们可以将false值用于条件渲染。

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

扩展Saeed的答案，该代码段等效于

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

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

Answer 2

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

使用此技巧将其简单地转换为布尔值：

!!（任何非布尔值）

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

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

2 个答案: