[解決済み] Reactコンポーネントディレクトリのindex.jsファイルはどのように機能しますか？

質問

私は新しいReactプロジェクトを始めたばかりで、その中で この パターンを使用することにしました。これは基本的に、それぞれのコンポーネントに従ってファイルをグループ化します。

├── actions
│   ├── LaneActions.js
│   └── NoteActions.js
├── components
│   ├── App
│   │   ├── App.jsx
│   │   ├── app.css
│   │   ├── app_test.jsx
│   │   └── index.js
│   ├── Editable
│   │   ├── Editable.jsx
│   │   ├── editable.css
│   │   ├── editable_test.jsx
│   │   └── index.js
...
│   └── index.js
├── constants
│   └── itemTypes.js
├── index.jsx
├── libs
│   ├── alt.js
│   ├── persist.js
│   └── storage.js
├── main.css
└── stores
    ├── LaneStore.js
    └── NoteStore.js

私が混乱しているのは、この場合index.jsがどのように機能するかということです。引用の通りです。

index.jsはコンポーネントのための簡単なエントリーポイントを提供するために存在します。 コンポーネントへの簡単な入り口を提供するためにあります。たとえノイズを追加したとしても、インポートを簡素化します。

この記事でやっていないことは、何が 内部 が何であるかを深く掘り下げて説明することです。Editable コンポーネントの場合、どのようなものが Editable.jsx と index.js はどのように見えるのが理想的でしょうか？

どのように解決するのですか？

この正確な構造から、例えば Editable コンポーネントは、そのコンポーネントに関するすべてを Editable.jsx .そして、あなたのコンポーネントコードがそのファイルの中に留まることを意味します。

さて、indexは何のためにあるのでしょうか？indexの中では、次のようなことをするだけです。

import Editable from './Editable.jsx';

export default Editable;

で終わりです。他のコンポーネントやコンテナの内部では、このようなことができるので便利です。

import Editable from '../Editable';

にアクセスしようとするからです。 index.js ファイルにアクセスしようとするので、それ以上の情報は必要ありません。これは、自動的に index.js ファイルを自動的にインポートし、実際のコンポーネントそのものをインポートします。もし index.js ファイルがなければ、これを行う必要がありました。

import Editable from '../Editable/Editable';

というのはちょっと厄介ですね。私は、コンポーネントをインポートしてエクスポートするだけのインデックスファイルを持ちたくありません。私が通常行うのは、すべてのコンポーネントコードを index.js ファイルの中に、すべてのコンポーネントコードを Editable.jsx を全く必要としません。これはあなた次第なので、あなたがより好むアプローチを自由に取ってください。