Hola, estoy atascado en este problema en el que no puedo averiguar cómo hacer una declaración en línea si no en reaccionar nativo.
{currentSlideIndex == 0 ? ( <> <KeyboardAvoidingView style={{flex:1}} behavior='position'> <BlurView intensity={20} tint="light" > <Text style={styles.label}>Name</Text> <TextInput value={name} onChangeText={onNameChange} style={styles.input} /> </BlurView> </KeyboardAvoidingView> </> ):( <> <KeyboardAvoidingView style={{flex:1}} behavior='position'> <BlurView intensity={20} tint="light" > <Text style={styles.label}>Surname</Text> <TextInput value={name} onChangeText={onNameChange} style={styles.input} /> </BlurView> </KeyboardAvoidingView> </> )}Quiero hacerlo para que tenga currentslideIndex == 0, currentslideIndex == 1, currentslideIndex == 2.
Prueba este código a continuación:
{ currentSlideIndex == 0 ? ( <> {/* code for slide 0 */} </> ) : (currentSlideIndex == 1 ? ( <> {/* code for slide 1 */} </> ) : ( <> {/* code for slide 2 */} </> ) ) }quieres algo como:
{currentSlideIndex === 0 ? (...) : currentSlideIndex === 1 ? (...) : //currentSlideIndex === 2 (...) }¡en realidad puedes anidar ternarios para que haya múltiples condiciones if/else if!
O:
puede tener una variable antes del retorno de su función de representación, es decir
let keyboardAvoidingView; if (currentSlideIndex === 0) { keyboardAvoidingView = ... } else if (currentSlideIndex === 1) { keyboardAvoidingView = ... } else { keyboardAvoidingView = ... }luego, en render, solo renderiza tu variable:
{keyboardAvoidingView}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.
Entonces en Jsx en realidad se convierte en algo así como
render(if (true) return 0) // This doesn't work because you can't put conditional inside function calls Pero si estuviera mapeando dentro de jsx usando { x.map(x => { if (true) return <Component //>)} funcionaría. Para condicionales solo puedes usar ternario.
Pero puede lograr lo que está diciendo usando 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> ) }