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

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

小云云

リリース： 2018-01-27 11:19:13

オリジナル

2615 人が閲覧しました

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

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

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

ログイン後にコピー

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

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

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

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

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

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

ログイン後にコピー

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

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

ログイン後にコピー