Троичный оператор в реакцию родной

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

У меня есть этот простой оператор возврата в функции рендера моего собственного класса реакции

Я хочу использовать <Item floatingLabel success>, если this.state[ $ {data} ] - true, иначе <Item floatingLabel > - false.

Поэтому я использую троичный оператор (? :) Но код выдает ошибку

что это зарезервированное ключевое слово

Итак, я преобразовал {this.state[ $ {данные} ]?<Item floatingLabel success>:<Item floatingLabel>} в this.state[ $ {данные} ]?<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

Нельзя использовать троичный оператор для рендеринга открывающего тега, подобного этому. То, чего вы пытаетесь достичь, это передать реквизит успеха вашему компоненту 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 prop:

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>

Answer 2

Кроме того, вы можете сделать это следующим образом.

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