Question

 <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本机类的render函数中有这个简单的return语句

我想使用 <Item floatingLabel success> 时，此this.state[ $ {data} ]为真，否则 <Item floatingLabel > 当它为假时。

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

这是保留关键字

因此我将{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>

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

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

Answer 2

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

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

三元运算符在本机反应

2 个答案: