Saltar al contenido

Dinámicamente rendir componentes en ReactOct, 21stIn este tutorial, vamos a aprender acerca de cómo hacer que los componentes …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de cómo hacer que los componentes de forma dinámica en solucionar con ayuda de ejemplos.

En primer lugar, tenemos que crear dos nuevos componentes para que podamos utilizarlos para la representación dinámica.

import React from "react";

function UserA() {
return (

This is user A

);
}

export default UserA; import React from "react";

function UserA() {
return (

This is user B

);
}

export default UserB;

dinámico componente

Ahora tenemos que crear un componente dinámico que ayuda a hacer que los demás componentes de forma dinámica en función de los apoyos.

import React from "react";
import UserA from "./userA";
import UserB from "./userB";

const components = {
usera: UserA, userb: UserB};

function DynamicComponent(props) {
const SelectUser = components[props.user]; return ;
}

export default DynamicComponent;

En el código anterior en primer lugar, nos importó dos componentes continuación, añadimos al objeto componentes.

Dentro Dynamiccomponent hemos creado una variable SelectUser y lo devolvió, por lo que si se pasa Usera como un componente prop Usuario A se representa otra cosa si pasamos userb como un componente prop Usuario B se representa en la pantalla.

Usando Uso dinámico componente

de dejar que nuestro componente dinámico ahora mediante su importación.

import React, { useState } from "react";
import DynamicComponent from "./Dynamic";

function App() {
const [user, changeUser] = useState("usera");
return (

{/* initially UserA component is rendered */}

);
}

export default App;

Aquí están cambiando entre dos componentes de forma dinámica mediante el uso de botones.