루트 디렉터리와 관련된 구성 요소 인스턴스를 참조하는 React의 사용에 대한 자세한 설명-JS 튜토리얼-php.cn

루트 디렉터리와 관련된 구성 요소 인스턴스를 참조하는 React의 사용에 대한 자세한 설명

小云云

풀어 주다： 2018-01-27 11:19:13

원래의

2614명이 탐색했습니다.

이 글에서는 주로 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;;

로그인 후 복사