React Core Layout組件體系結構

Question

我正在使用React Redux。

比方說，我有一些「核心部件」，如導航欄/頁眉頁腳&。

每個組件都有自己的風格（SCSS）。所以我想在兩個方面做的架構：

---

1. 每個組件都有自己的風格在同一個文件夾中。

   優點：聽起來更加模塊化。

   缺點：

   • 我不得不爲每個組件創建新的目錄。
   • 爲了使import更清晰（而不是像import CoreComp from 'CoreComp/CoreComp'），我將添加爲每個組件index.js文件，這將導入組件，它會更有意義。

---

組件用於樣式

缺點指南和單獨的目錄：聽起來比第一建議模塊化少。

優點：

• 我沒有做一個文件夾的每個組件。
• 我不需要輸入index.js。

---

我不是在尋找一個有關的討論，我只需要知道，如果有一個流行的convension了點。所有的

Answer 1

首先，不要擔心創建文件夾。他們不花你任何字節。

2.對於每個組件，假設我們有一個文件夾Component，在Component/index.js和export default寫組件的代碼。

所以，你可以導入，就像import Component from './Component';

3。組件的樣式進入Component/styles.scss。

4.創建常見風格的sass mixins /函數/變量，並將它放在common.scss中。 @import它和使用任何你想要的。

優點：

• 易典導航
• 易於調試
文件結構（更好地組織文件結構在我看來）
• 輕鬆地組織單元測試文件爲
• 容易理解好。

這是我們通常在React.js項目中遵循的。 （當然，就像任何事情一樣，會有一些人解僱這個，但我喜歡這種方式）。