javascript - 组织 React 组件

Question

我正在构建一个包含许多较小组件的 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)。无论如何只导入组件文件夹中的所有内容，这样我就不必明确指定组件的导入。

Answer 1

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

  export * from nav;
  export * from colorPicker;

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