Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

279
Views
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 answers
Answer question

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 Report

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 Report

0

Creo que esta forma es la mejor:

 {this.state.yourVariable === 'news' && <Text>{data}<Text/>}
over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!