가있어 내부에서

Question

내 반응 웹팩 프로젝트, 나는 반응 구성 요소의 다음 프로젝트 구조를 가지고 :

Component/ 
├── Component.jsx 
├── index.jsx 
└── styles.css 

index.jsx 파일을 단순히 수입과 수출 Component.jsx을; 이 모든 새로운를 요구하는 불필요한 단계가 될 수있다처럼 그러나이 보인다

import Component from '../Component' 

import Component from '../Component/Component' 

반대 : 그것을 필요로 파일이되는 이유는, 다음의 사용을 허용 구성 요소를 따라야합니다.

이 점을 염두에두고 저의 질문은 다음과 같습니다. 두 가지 장점을 모두 누릴 수 있습니까? 내 디렉토리에 Component.jsx과 styles.css 밖에 가질 수 없지만 내 import 선언에 이름을 두 번 사용할 필요가 없습니다.

Answer 1

내가 당신에게 내가 개인적으로 좋아하는 다음과 같은 구조를 제안하자.. 모든 구성 요소가 다른 폴더 구조를 가지고 예를 들어 (

구성 요소 트리 구조를 깨끗하고 깔끔을 유지하기 위해 당신에게 달려 Index.jsx

src/components/ 
    Butter/ 
     Butter.jsx 
     index.jsx 
    Beets/ 
     Beets.jsx 
    Cabbage/ 
     index.jsx 
    Meat.jsx 
index.jsx 

내용 components/index.jsx

export Butter from './Butter/index.jsx'; 
export Beets from './Beets/Beets.jsx'; 
export Cabbage from './Cabbage/index.jsx'; 
export Meat from './Meat.jsx'; 

S의 : 구성 요소 폴더는 단지 그들을 필요로 누구든지 이러한 구성 요소에 액세스) 정규화 오메 컨테이너 Borscht.jsx 다른 곳에서 프로젝트의 폴더가 이미 구성 요소 이름 인 할 것을 요구하면, 당신은 그 안에 파일 이름에 다시 넣어 필요하지 않은 구성 요소를

import { 
    Beets, 
    Cabbage, 
} from 'src/components'; 

Answer 2

를 사용한다. 나는이 접근법을 사용한다.

모든 현대 편집자는 탭에 폴더 이름을 추가하여 이미 두 개의 동일한 이름 (ComponentA/index.jsx 및 ComponentB/index.jsx)으로 문제를 해결합니다. 이것이 뷰 구성 요소이지만, 반응에 대해 같은 일이 있음을

참고.