アトミックデザインメソドロジを使用しているReactアプリケーションがあります。私のコンポーネントはそれほどのように編成されています。リアクトアトミックデザイン：コンポーネントの構成
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できる方法のでモックコンポーネントを返すために'./../..'をエイリアスしました現在テスト中のコンポーネントをテストします。
これまでのところ、このパターンはうまくいきました。しかし、私はある種の循環依存があることを認識しました。私がこれを知っている理由は、私がストーリーブックアプリケーションを実行すると、特定のコンテナが特定のコンポーネントをインポートしているため、コンポーネントが未定義に戻ってコンテナがエラーをスローするためです。
これは、特定の1つのコンテナでのみ発生し、ストーリーブックアプリでのみ発生します。私はなぜこのコンテナが特に失敗するのか、なぜ私のストーリーブックのアプリでしか決まるのか理解できないので、循環依存のためだと推測します。しかし、きれいなディレクトリ構造を維持しながら、すべてのコンポーネントのインポートを静的に保つことができる（つまり、同じ方法で読み込み、Webpackでエイリアスを続けることができる）ことを知りたい。
ありがとうございました！
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"はデフォルトエクスポートを渡さないため、未定義に戻ります。参照：https：//developer.mozilla。org/en-US/docs/Web/JavaScript/Reference/Statements/export – adz5A
私はそれを正しくやっているとはかなり確信しています。 'Atoms/index.js'では、すべての名前付きエクスポートをエクスポートしていますので、' module *からのエクスポート* 'は、あなたが言及したデフォルトのエクスポート問題に遭遇するべきではありません。 – abustamam
こんにちは、私はまだそれほど確かではありません。先ほど参照したドキュメントから、既定のモジュールを再エクスポートするためには、まず最初に既定のメンバをインポートし、次に名前付きエクスポートとして再エクスポートする必要があります。 – adz5A