组织 React 组件答案

【问题标题】：Organizing React Components组织 React 组件
【发布时间】：2017-09-20 15:16:33
【问题描述】：

我正在构建一个由许多较小组件组成的 React 应用程序。目前我正在像这样在 app.js 中导入组件：

import Nav from './components/nav'
import ColorPicker from './components/colorPicker'

class App extends Component {
  render() {
    return (
      <div>
      <Nav />
      <ColorPicker />
      </div>
    );
  }
}

export default App;

每个组件都是一个单独的 js 文件（nav.js、colorPicker.js）。无论如何只导入组件文件夹中的所有内容，这样我就不必明确指定组件的导入。

【问题讨论】：

标签： javascript reactjs ecmascript-6 es6-modules

【解决方案1】：

我不确定是否有办法只从一个文件夹中导入所有内容，每个文件一个模块，但您可以制作一种index.js 文件，您可以在其中导入您想要的所有内容，然后：

  export * from nav;
  export * from colorPicker;

然后您只需导入一个索引文件即可：import {nav, colorPicker} from './components/things';

【讨论】：

【解决方案2】：

您始终必须明确设置您使用的组件的导入，但您可以做的是通过设置一个索引文件来减少键入的代码量，您可以在该索引文件中导出要在所述文件中提供的所有组件，例如例如：

./components/index.js

import Component1 from './Component1';
import Component2 from './Component2';
import Component3 from './Component3';

export {
  Component1,
  Component2,
  Component3,
};

然后像这样在所需文件中导入所需的组件：

./app.js

import { Component1, Component2 } from './components';

class App extends Component {
  render() {
    return (
      <div>
      <Nav />
      <ColorPicker />
      </div>
    );
  }
}

export default App;

树形结构

app.js
components
+---
    Component1.js
    Component2.js
    index.js

【讨论】：

【解决方案3】：

如果你可以添加一个 babel 插件，你可以使用 babel-plugin-wildcard，这个插件完全可以满足你的需求。

取自 NPM：

具有以下文件夹结构：

|- index.js
|- dir
    |- a.js
    |- b.js
    |- c.js

以下JS：

import * as Items from './dir';

将被编译为：

const Items = {};
import _wcImport from "./dir/a";
Items.A = _wcImport;
import _wcImport1 from "./dir/b";
Items.B = _wcImport1;
import _wcImport2 from "./dir/c";
Items.C = _wcImport2;

意味着您将能够使用 Items.A 和 Items.B 访问这些项目。

您还可以使用以下方法选择性地选择文件：

import { A, C } from "dir/*";

在上面的例子中会转换成：

import A from "./dir/a";
import C from "./dir/c";

上面是这样做的：

import * as temp from "dir";
const { A, C } = temp;

在post 中找到答案。

【讨论】：