1

Soy nuevo en React Native y no sé como puedo renderizar un componente varias veces, digamos que tengo un componente que es una caja, yo quiero que me renderize ese componente 9 veces por ejemplo.

Este es el componente que me da una caja, le he quitado los styles para no liar más.

class Box extends Component<Props> {
    render() {
        return (
            <View>
                <View>
                    <Text></Text>
                </View>
                <View>
                    <Text></Text>
                </View>
                <View>
                    <Text></Text>
                </View>
            </View>
        )
    }
}

Y llamo al componente anterior desde este otro componente:

class Prov extends Component<MyProps, MyState> {
    constructor(props: any) {
        super(props);
        this.state = {
            componentController: true}
    }
    changeStateTrue() {
       this.setState({componentController: true});
    }

    changeStateFalse() {
        this.setState({componentController: false});
    }

    render() {
        let renderComponent;
        const componentController = this.state.componentController;

        if (componentController) {
            renderComponent=<Box/>
        }

        return (
            <View>
                <View>
                    <TouchableOpacity onPress={() => this.changeStateTrue()}>
                        <Text> Por Aceptar  </Text>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => this.changeStateFalse()}>
                        <Text> En curso </Text>
                    </TouchableOpacity>
                </View>
                <View>
                    {renderComponent}
                </View>
            </View>
        )
    }
}

3 respuestas 3

3

Pues simplemente lo llamas 9 veces.

<Box />
<Box />
<Box />   
<Box />
<Box />
<Box />
<Box />
<Box />
<Box />

Acuérdate de importarlo. Por ejemplo...

import Box from '../src/components/Box'

y que el fichero se llame Box.js

También puedes meterlo en un bucle for, etc.

1
  • Creo que no me he explicado bien, lo que yo intento es que el componente se renderize en un bucle, ya sean nueve veces o veinte.
    – Marc
    Commented el 26 nov. 2020 a las 8:08
0

Pues en ese caso:

for (let step = 0; step < 10; step++) {
    <Box />
}
1
  • 1
    probablemente sea mejor editar tu publicación anterior y añadir esta referencia, en lugar de añadir una nueva respuesta
    – fedorqui
    Commented el 26 nov. 2020 a las 11:24
0

Otra manera es:

var boxes = []
for(var i=0; i<9; i++) boxes.push(<Box key={`box-${i}`} />)
return (<div>
         .....
         {boxes}
         ....
        </div>)

Nota: al crear un arreglo de elementos, usualmente react necesitara una llave para identificar a cada uno (si no se coloca, veras alertas en la consola)

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.