Quiero reemplazar el número
en las líneas 9 y 14 (content.card1.)
el 1 después de la "tarjeta" con el
variable "i" del bucle for.
No he pensado en nada todavía.
¿Es eso posible? Sería
ser de gran ayuda para mi.
Juan
¡Gracias por ayudar!
Aplicación.js
function App() { const content = require('./content.json') var cards = []; for (let i = 0; i < 4; i++) { cards.push( <View style={styles.card} key={i}> <View style={styles.TitleBox}> <Text style={styles.title}> {content.card1.title} </Text> </View> <View style={styles.ContentBox}> <Text> {content.card1.content} </Text> </View> </View> ); } return( <ScrollView horizontal={ true } pagingEnabled={ true } showsHorizontalScrollIndicator={ false }> {cards} </ScrollView> ); } const styles = require('./style'); export default App;contenido.json
{ "cards" : 4, "card1": { "type" : "textonly", "title" : "Card 1", "content" : "Some Text 1" }, "card2": { "type" : "task", "title" : "Card 2", "content" : { "items" : 2, "step1" : "step1 title", "step2" : "step2 title" } }, "card3": { "type" : "task", "title" : "Card 3", "content" : { "items" : 2, "step1" : "step1 title", "step2" : "step2 title" } }, "card4": { "type" : "textonly", "title" : "Card 4", "content" : "Some Text 4" } }Desea utilizar claves dinámicas (es decir, Nombres de propiedad calculados) y generar claves "card1" , "card2" , etc. Usando índices [1-4] desea calcular números de tarjeta [1-4], es decir, content[`card${i}`] .
const content = require('./content.json'); function App() { const cards = []; for (let i = 1; i <= 4; i++) { cards.push( <View style={styles.card} key={i}> <View style={styles.TitleBox}> <Text style={styles.title}> {content[`card${i}`].title} </Text> </View> <View style={styles.ContentBox}> <Text> {content[`card${i}`].content} </Text> </View> </View> ); } return( <ScrollView horizontal={true} pagingEnabled={true} showsHorizontalScrollIndicator={false} > {cards} </ScrollView> ); }Dado que tiene control sobre content.json, sugeriría reformatear los datos para que sean más fáciles de procesar.
{ "length" : 4, "cards": [ { "type" : "textonly", "title" : "Card 1", "content" : "Some Text 1" }, { "type" : "task", "title" : "Card 2", "content" : { "items" : 2, "step1" : "step1 title", "step2" : "step2 title" } }, { "type" : "task", "title" : "Card 3", "content" : { "items" : 2, "step1" : "step1 title", "step2" : "step2 title" } }, { "type" : "textonly", "title" : "Card 4", "content" : "Some Text 4" } ], }Luego, su código puede simplemente asignar los datos a JSX directamente.
const content = require('./content.json'); function App() { const cards = []; for (let i = 1; i <= 4; i++) { cards.push( ); } return( <ScrollView horizontal={true} pagingEnabled={true} showsHorizontalScrollIndicator={false} > {content.cards.map((card, i) => ( <View style={styles.card} key={i}> <View style={styles.TitleBox}> <Text style={styles.title}> {card.title} </Text> </View> <View style={styles.ContentBox}> <Text> {card.content} </Text> </View> </View> ))} </ScrollView> ); }Si respondí correctamente su pregunta, puede usar esta manera.
for (let i = 0; i < 4; i++) { cards.push( <View style={styles.card} key={i}> <View style={styles.TitleBox}> <Text style={styles.title}> {content.card[i].title} </Text> </View> <View style={styles.ContentBox}> <Text> {content.card[i].content} </Text> </View> </View> ); }Creo que puede reemplazar content.card1.content con una variable dinámica utilizando la notación de corchetes y una plantilla literal como esta:
{content[`card${i}`].content} El literal de plantilla (comillas invertidas) nos permite concatenar la card de palabra clave y el índice de bucle i . La notación de corchetes nos permite usar la cadena concatenada como una referencia de propiedad de objeto.