원자 설계 방법론을 사용하는 React 앱이 있습니다. 내 구성 요소가과 같이 구성되어 있습니다React Atomic Design : 구성 요소 구성
components
|--Atoms
| |--Header
| | |--index.js
| | |--index.test.js
| | |--index.stories.js
| |--index.js
|--index.js
Header/index.js, 나는 구성 요소의 기본 내보내기을한다. Atoms/index.js, 난과 같이, 모든 구성 요소를 내보내기 :
export Header from './Header'
을 components/index.js에서 내가 지금처럼, 모든 레이어를 내 보냅니다
export * from './Atoms'
export * from './Moleclues'
내가 다른 구성 요소에서 구성 요소를 사용해야 할 경우, 나는 그것을 필요 components에서과 같이 : 내 테스트에서
import Header from './../..'
, 나는 O를 할 수있는 방법 있도록 모의 구성 요소를 반환 './../..'을 별칭했습니다 nly 현재 테스트중인 구성 요소를 테스트하십시오.
지금까지이 패턴이 잘 작동했습니다. 그러나, 나는 일종의 순환 의존성이 있음을 깨달았다. 내가 알고있는 이유는 내 동화책 앱을 실행할 때 특정 컨테이너가 특정 구성 요소를 가져오고 구성 요소가 정의되지 않은 상태로 반환되어 컨테이너에서 오류가 발생하기 때문입니다.
이것은 한 특정 컨테이너에서만 발생하며 내 이야기 책 앱에서만 발생합니다. 나는 왜이 컨테이너가 특히 실패 할 것인가를 결정할 수없는 이유와 내 이야기 책 앱에서만 왜 그런지 알 수 없다. 그래서 순환 의존성 때문이라고 추측한다. 그러나 깨끗한 디렉토리 구조를 유지하면서 모든 구성 요소 가져 오기를 정적으로 유지하는 방법 (즉, 웹 팩에서 앨리어싱을 계속 수행 할 수 있도록 동일한 방법으로 읽게하는 방법)을 알고 싶습니다.
감사합니다.
import Header from './../../atoms'
/*
* Header.js
* this exports an object { Header: Header } as default export
*
*/
export default { Header }
/*
* this imports the default member of the exports
* from the Header module in the same directory.
*
*/
import Header from "/Header"
/*
* If you are transpiling with babel (for instance) you will have an undefined
* export because what you actually have is
*/
// Header.js
exports = { Header: Header, __es6: true }
// index.js
const Header = require("./Header").default;
/*
* Note : your first example is a syntax error and should be
*/
export { Header } from "./Header";
/*
* to make it work correctly you need to
*/
//Header.js
export { Header };
// index.js
export * from "./Header";
// your components
import { Header } from "path/to/dir";
// this last line will find your directory according to your webpack config, as
// it's a directory it will find the index.js and proceed from there
안녕하세요, index.js에서 구성 요소를 올바르게 내보내시겠습니까? 'export * from module "'은 기본 내보내기를 전달하지 않으므로 undefined를 반환합니다. 참조 : https : //developer.mozilla.org/ko-ko/docs/Web/JavaScript/Reference/Statements/export – adz5A
나는 제대로하고 있다고 확신합니다. 'Atoms/index.js'에서 모든 명명 된 내보내기를 내보내므로'module *에서의 export *는 당신이 언급 한 기본 내보내기 문제로 넘어 가지 않아야합니다. – abustamam
안녕하세요, 저는 이전에 언급 한 문서에서 여전히 기본 모듈을 다시 내보낼 때 줄에 입력해야한다는 것을 읽을 수 있습니다. 첫 번째 기본 멤버를 가져온 다음 이름이 지정된 내보내기로 다시 내보낼 수 있습니다. – adz5A