* Soy nuevo para reaccionar nativo y JavaScript. Esta no es una pregunta avanzada. Solo trato de comparar una cadena como en Java. Pero no funciona. Cuando se ejecuta esto, también imprime las condiciones if como una picadura.
<FlatList data={data} keyExtractor={({id },index) => id} renderItem={({item}) =>( <View style={styles.container}> if({item.id} ==1){ <Text style={styles.textStyle1}>ID is : {item.id}</Text> }else{ <Text >ID is : {item.id}</Text> } <Text style={styles.textStyle2}>Title is :{item.title}</Text> <Text style={styles.textStyle3}>releaseYear is : {item.releaseYear}</Text> </View> )} /> * error Error: Text strings must be rendered within a <Text> component. * output in web [![enter image description here][1]][1] [1]: https://i.stack.imgur.com/UkHS6.pngNo puede agregar código dentro de los elementos JSX, pero puede hacer lo siguiente:
Agregue el código dentro de un bloque y use el operador condicional (ternario) :
<View style={styles.container}> { item.id ==1 ? <Text style={styles.textStyle1}>ID is : {item.id}</Text> : <Text >ID is : {item.id}</Text> } <Text style={styles.textStyle2}>Title is :{item.title}</Text> <Text style={styles.textStyle3}>releaseYear is : {item.releaseYear}</Text> </View>O puede usar Expresiones de función invocadas inmediatamente (IIFE)
{(function() { if (item.id==1) { return <Text style={styles.textStyle1}>ID is : {item.id}</Text>; } else { return <Text >ID is : {item.id}</Text> } })()} <Text style={styles.textStyle2}>Title is :{item.title}</Text> <Text style={styles.textStyle3}>releaseYear is : {item.releaseYear}</Text>Prueba esto :
{item.id ==1 ? <Text style={styles.textStyle1}>ID is : {item.id}</Text> : <Text >ID is : {item.id}</Text> }Eche un vistazo a la representación condicional