Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

255
Visualizações
declaración if-else dentro de jsx: ReactJS

Necesito cambiar la función de procesamiento y ejecutar alguna función de procesamiento secundario cuando se da un estado específico,

Por ejemplo:

 render() { return ( <View style={styles.container}> if (this.state == 'news'){ return ( <Text>data</Text> ) } </View> ) }

¿Cómo puedo implementar eso sin cambiar de escena? Usaré pestañas para cambiar el contenido dinámicamente.

over 4 years ago · Santiago Trujillo
3 Respostas
Responde à pergunta

0

Según DOC :

Las declaraciones if-else no funcionan dentro de JSX. Esto se debe a que JSX es solo azúcar sintáctico para llamadas a funciones y construcción de objetos.

Regla básica:

JSX es fundamentalmente azúcar sintáctico . Después de la compilación, las expresiones JSX se convierten en llamadas de función de JavaScript regulares y se evalúan como objetos de JavaScript. Podemos incrustar cualquier expresión de JavaScript en JSX envolviéndola entre llaves.

Pero solo expresiones, no declaraciones, significa directamente que no podemos poner ninguna declaración ( if-else/switch/for ) dentro de JSX .


Si desea representar el elemento condicionalmente, use el ternary operator , así:

 render() { return ( <View style={styles.container}> {this.state.value == 'news'? <Text>data</Text>: null } </View> ) }

Otra opción es llamar a una función desde jsx y poner toda la lógica if-else dentro de ella, así:

 renderElement(){ if(this.state.value == 'news') return <Text>data</Text>; return null; } render() { return ( <View style={styles.container}> { this.renderElement() } </View> ) }
over 4 years ago · Santiago Trujillo Relatório

0

Puede lograr lo que dice utilizando la expresión de función invocada inmediatamente (IIFE)

 render() { return ( <View style={styles.container}> {(() => { if (this.state == 'news'){ return ( <Text>data</Text> ) } return null; })()} </View> ) }

Aquí está el ejemplo de trabajo:

Editar impresionante-yalow-eb2nu

Pero, en su caso, puede quedarse con el operador ternario

over 4 years ago · Santiago Trujillo Relatório

0

Creo que esta forma es la mejor:

 {this.state.yourVariable === 'news' && <Text>{data}<Text/>}
over 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda