React Native 中的三元运算符答案

【问题标题】：Ternary operator in react nativeReact Native 中的三元运算符
【发布时间】：2019-02-17 03:43:43
【问题描述】：

 <Container>
    <Header function1={()=>this.props.navigation.openDrawer()}/>
        <Content>
                {this.state.formInputs.formFeilds.map((data)=>(
                                                {this.state[`${data}`]?<Item floatingLabel success>:<Item floatingLabel>}
                                                <Label>data</Label>
                                                <Input value={data}/>
                                                <Icon name='checkmark-circle' />
                                            </Item>             
                                        ))}

              </Content>
      </Container>
                )

我的 react native 类的渲染函数中有这个简单的返回语句

我想使用 <Item floatingLabel success> 当这个 this.state[${data}] 是true else <Item floatingLabel > 当它为 false 时。

所以我使用三元运算符（？：）但代码抛出错误

这是保留关键字

所以我将{this.state[${data}]?<Item floatingLabel success>:<Item floatingLabel>} 转换为this.state[${data}]?<Item floatingLabel success>:<Item floatingLabel>

现在错误是

>     Unexpected token, expected ,
 (128:5)   126 |                           ))}   
127 |
128 |      </Content>
129 |      ^ </Container>

但是如果我像这样渲染

     <Container>
                    <Header function1={()=>this.props.navigation.openDrawer()}/>
<Content>
        {this.state.formInputs.formFeilds.map((data)=>(
                                        <Item floatingLabel success>
                                        <Label>data</Label>
                                        <Input value={data}/>
                                        <Icon name='checkmark-circle' />
                                    </Item>             
                                ))}

      </Content>

然后代码运行成功。但我需要使用三元运算符。请帮忙。

【问题讨论】：

标签： react-native jsx

【解决方案1】：

或者，您可以按照以下方式进行操作。

<Container>
  <Header function1={()=>this.props.navigation.openDrawer()}/>
    <Content>
      {this.state.formInputs.formFeilds.map((data)=>(
       <Item floatingLabel success={!!this.state[`${data}`]}>
        <Label>data</Label>
        <Input value={data}/>
        <Icon name='checkmark-circle' />
        </Item>             
        ))}
  </Content>
</Container>

或者如果你还需要使用三元运算符，那么尝试如下。

{!!this.state[`${data}`] && <Item floatingLabel success>}
{!this.state[`${data}`] && <Item floatingLabel>}

【讨论】：

【解决方案2】：

您不能使用三元运算符来呈现这样的开始标记。如果您的状态中存在与键 data 对应的值，您想要实现的是将成功道具传递给您的 Item 组件。可以这样实现

  <Container>
    <Header function1={this.props.navigation.openDrawer}/>
    <Content>
      {this.state.formInputs.formFeilds.map((data)=>(
        <Item floatingLabel success={Boolean(this.state[`${data}`])}>
          <Label>data</Label>
          <Input value={data}/>
          <Icon name='checkmark-circle' />
        </Item>
      ))}
    </Content>
  </Container>

然后您可以在 Item 组件中与 success 属性进行比较：

if (this.props.success === true) // do something success related

if (this.props.success !== true) // do something failure related

如果您必须使用三元运算符（对于这种特定情况，这是一个糟糕的决定，因为代码重复且可读性较差），您需要这样做：

<Container>
    <Header function1={this.props.navigation.openDrawer} />
    <Content>
      {this.state.formInputs.formFeilds.map(
        data =>
          this.state[`${data}`] ? (
            <Item floatingLabel success>
              <Label>data</Label>
              <Input value={data} />
              <Icon name="checkmark-circle" />
            </Item>
          ) : (
            <Item floatingLabel>
              <Label>data</Label>
              <Input value={data} />
              <Icon name="checkmark-circle" />
            </Item>
          )
      )}
    </Content>
  </Container>

【讨论】：