0
274
ViewsInterpolación de cadenas JSX en un nombre de componente
tengo este codigo...
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-card__work-type"> { /* {label === 'Novice' && <Novice />} {label === 'Apprentice' && <Apprentice />} {label === 'Explorer' && <Explorer />} {label === 'Advocate' && <Advocate />} {label === 'Profesional' && <Profesional />} {label === 'Ambassador' && <Ambassador />} */ } { `< ${label} />` } <span className="profile-card__work-type-text"> {' '} {label} </span> </div> </Fade> ); }; Quiero usar la variable 'etiqueta' como el nombre de mi componente y estoy tratando de usar la interpolación de cadenas para usarla así { `< ${label} />` } pero solo imprime la cadena < Principiante/ > a la pantalla.
¿Cómo se puede usar la etiqueta variable como el nombre del componente en lugar de varias líneas de condicionales?
Saludos, Nicolás
2 answers
Answer question0
Usa un objeto para almacenar tus componentes...
const obj = { Novice: <Novice />, Apprentice: <Apprentice />, Explorer: <Explorer />, Advocate: <Advocate />, Profesional: <Profesional />, Ambassador: <Ambassador /> };Y luego acceda al objeto usando la etiqueta.
{obj[label]}0
No puede simplemente poner < ${label} /> y esperar que se evalúe como un Componente si realmente quiere hacer esto, tiene que usar el accesorio dangerouslySetInnerHTML en un <div/> o algo así y darle un html válido Cuerda. Pero como sugiere el nombre del accesorio, es peligroso dada la posibilidad de ataques de ejecución remota de código.
Otra forma de hacer esto y probablemente la mejor manera, como sugiere la otra Respuesta, es colocar sus Componentes que ya están en una Matriz o como propiedades de un Objeto y acceder a ellos a través del índice del Componente en la Matriz o la clave de la propiedad del Objeto. .