Tengo un componente "LessonFrame" que importa contenido en forma de componentes de varios archivos titulados Lesson1, Lesson2, Lesson3, etc. Los dos componentes que estoy importando de cada uno de ellos se llaman pasos y Contenido, y puedo llamarlos en el componente principal usando Lesson1.steps, Lesson3.Content, etc.
Pero quiero poder pasar al componente principal un número de lección y luego renderizar los subcomponentes del archivo correcto en función de eso, por lo que si paso el accesorio "2", quiero llamar a los pasos y Contenido de la Lección2.
Aquí está la parte relevante de mi código:
import * as Lesson1 from "./Lesson1"; import * as Lesson2 from "./Lesson2"; import * as Lesson3 from "./Lesson3"; export const LessonFrame = ({lesson}) => { const steps = eval("Lesson" + lesson).steps const Content = eval("Lesson" + lesson).ContentComo puede ver, intenté hacer eval ("Lección" + lección) , pero eso no funciona, y cuando intento iniciar sesión en la consola, aparece este error: ReferenceError: Lesson1 no está definido
Sin embargo, si solo consola.log "Lesson1", eso funciona bien.
Entonces parece que está tratando de encontrar una variable llamada Lesson1, pero por alguna razón no funciona.
TLDR: quiero poder usar una variable generada a partir de la palabra "Lección" y un número pasado a un componente como accesorio, como "Lección1", "Lección2", etc.
¿Algunas ideas?
¿Por qué no usar simplemente una matriz?
import * as Lesson1 from "./Lesson1"; import * as Lesson2 from "./Lesson2"; import * as Lesson3 from "./Lesson3"; const lessons = [Lesson1, Lesson2, Lesson3]; export const LessonFrame = ({lesson}) => { const { steps, Content } = lessons[lesson - 1];Si desea representar una lección basada en accesorios aprobados. Simplemente puede usar **cambiar caso** como se muestra a continuación:
import * as Lesson1 from "./Lesson1"; import * as Lesson2 from "./Lesson2"; import * as Lesson3 from "./Lesson3"; export const LessonFrame = ({lesson}) => { switch(lesson){ case 1 : return <Lesson1 /> case 2 : return <Lesson2 /> case 3 : return <Lesson3 /> default : return <>No lesson found with this lessonNumber </> } }