ルート ディレクトリを基準としたコンポーネント インスタンスの参照を React が使用する方法の詳細な説明

この記事では、React がルート ディレクトリに関連して参照コンポーネントをどのように使用するかに関する関連情報を、サンプル コードを通じて詳細に紹介します。この記事は、学習や仕事に必要な学習に役立ちます。以下のエディターで学習してください。皆さんのお役に立てれば幸いです。

私は開発するコンポーネントで次のような参照をよく行います:

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';

ただし、中規模および大規模なプロジェクトでは、コンポーネントが多数ある場合、このように相対パス参照を使用するのが一般的です。と紹介しましたが、書くのも非常に苦痛です。

もちろん、webpack の resolve.alias 設定エイリアスを使用して、特定のファイル ディレクトリを固定インポートとして設定できます。

たとえば、上記の例では、utils フォルダーを utils エイリアスとして設定できます。将来的には、../../../ を大量に記述せずに utils をインポートすることしかできなくなります。

構成設定は次のとおりです:

const path = require('path');

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

上の例を書き直すと、次のようになります:

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';

関連する推奨事項:

php Web サイトのルート ディレクトリの物理パス メソッド (推奨) のヒント

以上がルート ディレクトリを基準としたコンポーネント インスタンスの参照を React が使用する方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。