Saltar al contenido

¿Cómo importar todos los componentes en React?

Hola usuario de nuestra web, hallamos la respuesta a lo que buscabas, desplázate y la verás más abajo.

Solución:

Bueno, he pasado por lo que tienes; Siento que lo que realmente necesitabas es entender la razón para hacer eso. Estoy bastante seguro de que lo que quiere lograr es que sus componentes se importen desde un solo archivo en lugar de desde los archivos donde se exportaron los componentes.

You don't want to do this:

import NavBar from 'src/modules/layout/NavBar';
import SideBar from 'src/modules/layout/SideBar';

Pero lo que quiere es importar todos sus componentes desde un solo archivo donde quiera usarlos. Entonces, si ese es el caso, no necesita agregar más complejidades. Todo lo que necesitas hacer es:

// export the components like this
export default NavBar;
export default SideBar;

// Then, in your src/modules/layout/index.js file, import // the components you exported just the way you did it

import NavBar from './NavBar';
import SideBar from './SideBar';

export 
NavBar,
SideBar


// Hence, wherever you need both components, you can easily do this:
import  NavBar, SideBar  from '../index.js'

// From the above, you are just importing both components from the index.js file. 

Entonces, creo que eso responde a tu pregunta.

Solo para agregar a la respuesta de Onyekachi Samuel y para responder a la todos parte del titulo:

Después de crear el src/modules/layout/index.js archivo como lo describió, puede importar todo por:

import * as All from './layout'

Y use los componentes exportados:


Por ejemplo:

// Folder structure:
//    |-App.js
//    |-Layout
//        |-NavBar.js
//        |-SideBar.js
//        |-index.js


// App.js in the same location as Layout folder

import React from 'react';
import * as All from './layout

export default function App(props) 

    return (
)

Espero que esto pueda aclararlo para algunos.

Te mostramos las reseñas y valoraciones de los usuarios

Recuerda que tienes el privilegio agregar una reseña si te ayudó.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)


Tags : /

Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *