组织React组件

Question

我正在构建一个由许多较小的组件组​​成的React App。 目前，我正在像这样导入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）。 无论如何，是否只将所有内容导入components文件夹中，所以我不必显式指定组件的导入。

Answer 1

我不确定是否可以从文件夹中导入每个模块一个模块的所有内容，但是您可以创建一个index.js文件，在其中导入所需的所有内容，然后：

  export * from nav;
  export * from colorPicker;

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

Answer 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

Answer 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;

在此帖子中找到答案。