Tengo un componente que se mapea sobre una serie de componentes a los que se les han pasado accesorios, algo así:
const Component = (prop0, prop1, prop2) => { const array = [ { id: 0, component: <SubComponent0 prop0={prop0}> }, { id: 1, component: <SubComponent1 prop1={prop1}> }, { id: 2, component: <SubComponent2 prop2={prop2}> } ]; return ( {array.map(obj => <div key={obj.id}> {obj.component} </div> )} ); }; export default Components;Me gustaría separar la matriz en su propio archivo JS en el que importo, lo que funcionó bien para mí en otros casos en los que los componentes no involucran accesorios, pero en este caso me encuentro con el problema de que los accesorios no están definidos fuera del alcance. de este componente funcional, y no puedo entender cómo puedo importar/pasar esos accesorios al nuevo archivo JS donde coloco la matriz. ¿Es eso posible de hacer, o hay otra forma de mover la matriz a un archivo separado? Gracias.
Un enfoque para eso podría ser usar una función predeterminada que construya los datos y luego devuelva todo.
datos.js
const getData = (prop0, prop1, prop2) => { return [ { id: 0, component: <SubComponent0 prop0={prop0}> }, { id: 1, component: <SubComponent1 prop1={prop1}> }, { id: 2, component: <SubComponent2 prop2={prop2}> } ]; } module.exports = getData;Aplicación.js
const getData = require('data.js'); const Component = (prop0, prop1, prop2) => { const array = getData(prop0, prop1, prop2); };Creo que también puede probar el componente dinámico significa el nombre del componente de String que nunca implementé, pero busco poco y preparo la solución como se muestra a continuación. Puedes probar y decirnos si funciona.
import { lazy } from 'react'; const getData = (props) =>{ const array = props.map((item,index) => { const DynamicComponent = lazy(() => import(`./SubComponent${index}`)); return { id : index, component : <DynamicComponent prop=`prop${item}` /> } }); return array } export default getData; import getData from './data.js'; const Component = (...props) => { const array = getData(props) return ( {array.map(obj => <div key={obj.id}> {obj.component} </div> )} ); }; export default Component;