三元运算符在本机反应 [英] Ternary operator in react native

问题描述

 <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>
                )

我的本​​机类的render函数中有这个简单的return语句

我想在this.state[ $ {data} ]为true时使用 <Item floatingLabel success> ，否则为 <Item floatingLabel > .

所以我使用三元运算符(?:)但代码抛出错误

I have this simple return statement in render function of my react native class

I want to use <Item floatingLabel success> when this this.state[${data}] is true else <Item floatingLabel > when it is false.

So i use ternary operator (?:) But the code is throwing error

这是保留关键字

that this is reserved key word

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

现在错误是

So I converted {this.state[${data}]?<Item floatingLabel success>:<Item floatingLabel>} to this.state[${data}]?<Item floatingLabel success>:<Item floatingLabel>

Now the error is

>     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>

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

then code run successfully. But I need to use ternary operator. Any help please.

推荐答案

或者，您也可以按照以下步骤进行操作.

Alternatively, you can do it as following.

<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>

或者，如果您仍然需要使用三元运算符，请尝试以下操作.

Or if you still need to use ternary operator, then try it as following.

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

这篇关于三元运算符在本机反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！