Je développe donc un site sur React et j'essaie d'organiser BrowserRouter, donc pour chaque composant (page) je crée un chemin dans App.js comme celui-ci
import MyComponent1 from "./articles/MyComponent1.js";
et je voudrais ajoutez plusieurs composants pour créer plusieurs itinéraires comme ça. La question est de savoir s'il existe un moyen efficace de gérer plusieurs importations à partir d'UN dossier qui ne contient que des fichiers .js. J'ai un dossier "./articles" et pour chaque fichier que je veux exporter, je le fais maintenant
<Route exact path="/" component={Homepage} />
<Route path="/about" component={About} />
Répéter cette ligne uniquement en changeant le dernier paramètre ne semble pas correct . Y a-t-il une astuce pour l'importation qui peut la rendre plus efficace?
4 Réponses :
Si vous le souhaitez, vous pouvez créer un fichier index.js dans les articles dont le seul travail est de collecter les différents composants et de les exporter à partir d'un seul emplacement. Par exemple:
// /articles/index.js
export { default as MyComponent1 } from './MyComponent1.js';
export { default as MyComponent2 } from './MyComponent2.js';
export { default as MyComponent3 } from './MyComponent3.js';
export { default as MyComponent4 } from './MyComponent4.js';
// Used in another file:
import { MyComponent1, MyComponent2, MyComponent3, MyComponent4 } from './articles';
Vous pouvez ajouter un fichier index.js dans le répertoire / articles et laisser ce fichier index.js importer et exporter toutes les classes dans le dossier. Ensuite, vous pouvez importer toutes les exportations à partir du même chemin.
ouais, je connais celui-ci. mais si vous avez des centaines d'articles et que votre projet est écrit avec React, cela signifie-t-il qu'ils doivent tous être importés comme ça, manuellement? comme s'il n'y avait pas de sale hack avec * ou quelque chose? Je veux dire que mon projet n'est pas si grand, mais je suis toujours curieux. Je suis juste un débutant qui essaie de comprendre les choses :)
@justreacting je ne pense pas que vous puissiez importer à partir de différents fichiers en utilisant simplement smth comme * . Mais vous pouvez au moins écrire un script qui lit vos noms de fichiers et génère dynamiquement ce code d'importation / exportation. Mais cela ne fonctionnera que s'il n'y a qu'une seule exportation par fichier et si le nom de fichier correspond à la classe à exporter
Vous pouvez résoudre cette situation avec le nœud js (émuler import * ):
fs.stat avec vos composants fs.writeFile avec tous ces composants Si les articles ne diffèrent que par leur contenu, mais que la structure est la même, je suggérerais de créer un seul composant général 'Article' qui affichera des éléments différents en fonction des accessoires fournis et vous pourrez stocker les informations de l'article dans certains JSON ou backend dans un tableau et itérer dessus. Cela vous permettra d'écrire le code une fois et de simplement remplir le tableau d'articles sans avoir besoin de maintenir les importations. J'espère que cela vous aidera!