Explication détaillée de l'utilisation par React du référencement des instances de composants par rapport au répertoire racine-js tutoriel-php.cn

Explication détaillée de l'utilisation par React du référencement des instances de composants par rapport au répertoire racine

小云云

Libérer： 2018-01-27 11:19:13

original

2620 Les gens l'ont consulté

Cet article vous présente principalement les informations pertinentes sur la façon dont React utilise le composant de référence par rapport au répertoire racine. L'article le présente en détail à travers l'exemple de code. Il a une certaine valeur d'apprentissage de référence pour les études ou le travail de chacun. j'en ai besoin Apprenons avec l'éditeur ci-dessous, j'espère que cela pourra aider tout le monde.

Dans les composants que vous développez, vous faites souvent des références telles que :

import genFetchEntryListArgs from &#39;../../../utils/table/genFetchEntryListArgs&#39;;
import { parseQuery, stringifyQuery } from &#39;../../../utils/query&#39;;
import mapMyToProps from &#39;../../../utils/connect/mapMyToProps&#39;;
import genPagination from &#39;../../../utils/table/pagination&#39;;
import handleConfirm from &#39;../../../utils/handleConfirm&#39;;
import getBaseQuery from &#39;../../../utils/getBaseQuery&#39;;
import setSortQuery from &#39;../../../utils/setSortQuery&#39;;
import handleError from &#39;../../../utils/handleError&#39;;
import injectProto from &#39;../../../utils/injectProto&#39;;
import injectApi from &#39;../../../utils/injectApi&#39;;
import querySchema from &#39;./querySchema&#39;;
import genColumns from &#39;./genColumns&#39;;

Copier après la connexion

Utilisez des références de chemin relatif comme celle-ci Bien que c'est une approche relativement courante, dans les projets moyens et grands, lorsqu'un grand nombre de composants sont introduits, c'est extrêmement pénible à écrire.

Bien sûr, nous pouvons configurer certains répertoires de fichiers comme importations fixes en utilisant l'alias de configuration resolve.alias dans webpack.

Par exemple, dans l'exemple ci-dessus, nous pouvons définir le dossier utils comme alias utils. À l'avenir, nous ne pourrons importer que des utils sans écrire de ../../../.

Les paramètres de configuration sont les suivants :

const path = require(&#39;path&#39;);

module.exports = {
 ...
 resolve: {
  alias: {
   &#39;utils&#39;: path.resolve(__dirname, &#39;../src/utils&#39;),
  }
 },
 ...
};

Copier après la connexion

Une fois l'exemple du haut réécrit , cela devrait ressembler à ceci :

import genFetchEntryListArgs from &#39;../../../utils/table/genFetchEntryListArgs&#39;;
import { parseQuery, stringifyQuery } from &#39;utils/query&#39;;
import mapMyToProps from &#39;utils/connect/mapMyToProps&#39;;
import genPagination from &#39;utils/table/pagination&#39;;
import handleConfirm from &#39;utils/handleConfirm&#39;;
import getBaseQuery from &#39;utils/getBaseQuery&#39;;
import setSortQuery from &#39;utils/setSortQuery&#39;;
import handleError from &#39;utils/handleError&#39;;
import injectProto from &#39;utils/injectProto&#39;;
import injectApi from &#39;utils/injectApi&#39;;
import querySchema from &#39;./querySchema&#39;;
import genColumns from &#39;./genColumns&#39;;

Copier après la connexion

Recommandations associées :

Plusieurs méthodes (recommandées) pour obtenir php le chemin physique du répertoire racine du site Web

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!