index.js文件如何在React組件目錄中工作？

我剛開始一個新的項目作出反應，並決定根據其各自的組件使用this模式，基本上組文件：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.jsx和index.js理想上會是什麼樣子？

來源

2017-05-21 Carl Edwards

'index.js'文件允許您將它的父文件夾作爲模塊導入（或'require（）'）。此行爲從Node.js複製，該文件已在[Folders as Modules]（https://nodejs.org/dist/latest-v7.x/docs/api/modules.html#modules_folders_as_modules）下的文檔中涵蓋此內容 - 「*如果目錄中沒有package.json文件，則Node.js將嘗試從該目錄中加載'index.js'或'index.node'文件。*」 –

那麼這個確切的結構表明，例如，Editable組件將擁有Editable.jsx內的該組件的所有內容。我的意思是你的組件代碼保留在該文件中。

現在什麼是索引？內部索引你可以簡單地做這樣的事情：

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。現在，這取決於你，所以隨時採取你更喜歡的方法。

來源

2017-05-21 02:02:49 G4bri3l

非常感謝您清除這對我來說。出於好奇，你通常保持你的文件（CSS，測試等）在組件目錄pascal套或蛇案（如文章中所見）？我問，因爲在你的情況下，索引文件取代了pascal封裝的組件文件。 –

在一天結束時這是個人選擇，但我更喜歡使用帕斯卡案例，因爲它是js的常見樣式選擇。 – G4bri3l

我想在目錄內的index.js的好處將迫使你只有每個目錄一個組件。我犯了創建一個名爲component的文件夾的錯誤，並且在放置很多components.js文件的過程中，我遇到了此線程上的模式描述，並且我喜歡它。也感謝您的明確解釋。 – Jozcar

index.js文件如何在React組件目錄中工作？

回答

相關問題