Necesito ayuda para intentar devolver/renderizar dinámicamente un componente personalizado en mi aplicación nativa de reacción.
Mi objetivo es usar una variable para representar un componente, en lugar del nombre original de ese componente.
En mi código nativo de reacción, tengo 4 componentes de "carácter" que toman exactamente los mismos accesorios. Es posible que deba procesarse cualquiera de estos en función de la interacción de mi usuario, por lo que quiero limpiar mi código escribiendo el bloque del componente solo una vez.
Mi problema es que para hacer que esto funcione en este momento, tengo un bloque de interruptor/caja que toma el accesorio y devuelve el componente correcto. Esto significa que tengo mucho código repetido que me gustaría eliminar, pero sigo recibiendo el mismo error:
Ver la devolución de llamada del captador de configuración para el componente [MI NOMBRE DE COMPONENTE] debe ser una función (recibida como 'indefinida')
Mi código completo está abajo, ¿qué estoy haciendo mal?
import React, { } from 'react'; import { View, } from "react-native"; // My custom components import Larry from './characters/larry'; import Jane from './characters/jane'; import Reginald from './characters/reginald'; import Amy from './characters/amy'; const CharacterFactory = (props) => { // I WANT TO DO IT THIS WAY BUT IT DOES NOT WORK AND RESULTS IN AN ERROR: // View config getter callback for component 'Larry' must be a function (received 'undefined') const FactoryOutput = props.character; return ( <FactoryOutput top={props.top} bottom={props.bottom} shoes={props.shoes} /> ); // THIS APPROACH WORKS BUT IT IS TOO LONG AND INEFFICIENT AS MORE CHARACTERS GET ADDED switch (props.character) { case 'Larry': return ( <Larry top={props.top} bottom={props.bottom} shoes={props.shoes} /> ); break; case 'Jane': return ( <Jane top={props.top} bottom={props.bottom} shoes={props.shoes} /> ); break; case 'Reginald': return ( <Reginald top={props.top} bottom={props.bottom} shoes={props.shoes} /> ); break; case 'Amy': return ( <Amy top={props.top} bottom={props.bottom} shoes={props.shoes} /> ); break; default: break; } } export default CharacterFactory;OP aquí, lo descubrí y quería dejar la respuesta aquí para futuros lectores.
Primero, debe crear un objeto const de todos los componentes importados que desea renderizar dinámicamente. Esto tiene que estar fuera del bloque del componente principal.
const characters = { Larry, Jane, Reginald, Amy, };Luego, dentro de su componente principal, crea una const para su importación de destino haciendo referencia a la matriz que creó anteriormente.
const FactoryOutput = characters[props.character];Y, finalmente, puede escribir un solo bloque de código que representará dinámicamente el componente importado en función de un valor prop. No más declaraciones de cambio/caso.
<FactoryOutput top={props.top} bottom={props.bottom} shoes={props.shoes} />Aquí está el código original modificado con la solución:
import React, {} from 'react'; import { View, } from "react-native"; // My custom components import Larry from './characters/larry'; import Jane from './characters/jane'; import Reginald from './characters/reginald'; import Amy from './characters/amy'; const characters = { Larry, Jane, Reginald, Amy, }; const CharacterFactory = (props) => { const FactoryOutput = characters[props.character]; return ( <FactoryOutput top={props.top} bottom={props.bottom} shoes={props.shoes} /> ); } export default CharacterFactory;