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

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

小云云
小云云원래의
2018-01-27 11:19:132612검색

이 글에서는 주로 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를 사용하여 웹사이트 루트 디렉터리의 실제 경로 방법(권장) 팁

위 내용은 루트 디렉터리와 관련된 구성 요소 인스턴스를 참조하는 React의 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.