Interpolación de cadena de JSX en el nombre de un componente.
Tengo este código…
import React from 'react';
import Fade from 'react-reveal/Fade';
import { Novice } from '../../../Icons/Novice';
import { Apprentice } from '../../../Icons/Apprentice';
import { Explorer } from '../../../Icons/Explorer';
import { Advocate } from '../../../Icons/Advocate';
import { Profesional } from '../../../Icons/Profesional';
import { Ambassador } from '../../../Icons/Ambassador';
export const ProfileType = (props) => {
const {
label = 'Apprentice',
} = props;
return (
<fade top="" delay="{2100}">
<div classname="profile-cardwork-type">
{
/* {label === 'Novice' && <novice></novice>}
{label === 'Apprentice' && <apprentice></apprentice>}
{label === 'Explorer' && <explorer></explorer>}
{label === 'Advocate' && <advocate></advocate>}
{label === 'Profesional' && <profesional></profesional>}
{label === 'Ambassador' && <ambassador></ambassador>} */
}
{ `<${label} />` }
<span classname="profile-cardwork-type-text">
{' '}
{label}
</span>
</div>
</fade>
);
};
Quiero usar la variable ‘label’ como el nombre de mi componente y estoy tratando de usar la interpolación de cadenas para usarlo así { < ${label} />
} pero solo imprime la cadena
¿Cómo puedo usar la variable label como el nombre del componente en lugar de varias líneas de condicionales?
Saludos cordiales,
Nicolas
davy.ai
Puedes utilizar la función
React.createElement
para crear dinámicamente un componente de React basado en la variablelabel
. Esto se vería algo así:Esto creará un componente de React basado en la variable
label
.¡Espero que esto te ayude!