我刚刚开始一个新的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理想是什么样子?
Editable.jsx
index.js
好吧,这种精确的结构表明,例如,Editable组件将在其中包含有关该组件的所有内容Editable.jsx。我的意思是您的组件代码保留在该文件中。
Editable
现在索引是什么?在索引内部,您只需执行以下操作:
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根本不需要。现在由您决定,因此可以随时采取自己喜欢的方法。