Detaillierte Erläuterung der Verwendung von React zur Referenzierung von Komponenteninstanzen relativ zum Stammverzeichnis

Dieser Artikel stellt Ihnen hauptsächlich die relevanten Informationen darüber vor, wie React die Referenzkomponente relativ zum Stammverzeichnis verwendet. Der Artikel stellt sie im Detail anhand des Beispielcodes vor. Es hat einen gewissen Referenz-Lernwert für alle, die lernen oder arbeiten Ich brauche es. Lassen Sie uns mit dem unten stehenden Editor lernen. Ich hoffe, es kann allen helfen.

In den Komponenten, die Sie entwickeln, machen Sie häufig Referenzen wie:

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

Verwenden Sie relative Pfadreferenzen wie diese Obwohl Dies ist ein relativ häufiger Ansatz. In mittleren und großen Projekten ist das Schreiben äußerst mühsam, wenn eine große Anzahl von Komponenten eingeführt wird.

Natürlich können wir bestimmte Dateiverzeichnisse als feste Importe konfigurieren, indem wir den Konfigurationsalias resolve.alias im Webpack verwenden.

Im obigen Beispiel können wir beispielsweise den Utils-Ordner als Utils-Alias ​​festlegen. In Zukunft können wir Utils nur noch importieren, ohne ein ../../../ zu schreiben.

Die Konfigurationseinstellungen lauten wie folgt:

const path = require('path');

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

Nachdem das obere Beispiel neu geschrieben wurde , es sollte so aussehen:

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

Verwandte Empfehlungen:

Mehrere Methoden (empfohlen) Tipps für den Erhalt von PHP der physische Pfad des Website-Stammverzeichnisses

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung von React zur Referenzierung von Komponenteninstanzen relativ zum Stammverzeichnis. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!