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）。反正只是导入组件文件夹中的所有内容，所以我不必明确指定组件的导入。

Answer 1

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

  export * from nav;
  export * from colorPicker;

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

Answer 2

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

<强> ./组件/ 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;

在post内找到答案。

组织React组件

3 个答案: