Организация компонентов React

Я создаю приложение 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). Можно ли просто импортировать все в папку компонентов, поэтому мне не нужно явно указывать импорт компонентов.


reactjs javascript es6-modules ecmascript-6
person john doe    schedule 20.09.2017    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Я не уверен, есть ли способ просто импортировать все из папки с одним модулем на файл, но вы можете сделать своего рода index.js файл, в который вы бы импортировали все, что захотите, тогда:

  export * from nav;
  export * from colorPicker;

И тогда вам нужно всего лишь импортировать один индексный файл, из которого вы можете: import {nav, colorPicker} from './components/things';

person istrupin    schedule 20.09.2017

arrow_upward
0
arrow_downward

Вам всегда нужно явно задавать импорт компонентов, которые вы используете, но вы можете уменьшить количество набираемого кода, настроив индексный файл, в который вы экспортируете все компоненты, которые хотите сделать доступными в указанном файле, например, как это :

./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
person Dez    schedule 20.09.2017

arrow_upward
0
arrow_downward

Если вы можете добавить подключаемый модуль Babel, вы можете использовать babel-plugin-wildcard, это плагин, который делает именно то, что вам нужно.

Взято из НПМ:

Со следующей структурой папок:

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

Ответ найден внутри этого сообщения.

person Juan Rubio    schedule 20.09.2017