使用解构导出默认用法

Question

我找到了一个代码库来做这件事。

//index.js
export { default } from './Tabs'
export { default as Tab } from './Tab'

//Tab.js
export default class Tab extends Component {
  render() => 'Something'
}

这是可以理解的，作者将Tab文件放在一个Tab文件夹下，这样在其他地方他就可以导入'./Tabs‘，但是为什么在index.js中他需要解构？

Answer 1

许多人遵循这种命名法，索引文件只是导出，这使得导入变得更容易。

它允许您从Tabs文件夹导入，而无需明确指定index.js文件名。最重要的是，它让你只需一句话就可以从文件夹标签中导入内容。

例如：

// Tab/Tab.js

import React, { Component } from "react";

class Tab extends Component {
  render() {
    return <span>Tab</span>;
  }
}
export default Tab;

// Tab/Tabs.js

import React, { Component } from "react";

class Tabs extends Component {
  render() {
    return <span>Tabs</span>;
  }
}
export default Tabs;

// Tab/index.js

export Tab from "./Tab";
export Tabs from "./Tabs";

// Main文件

import React from "react";
import { render } from "react-dom";
import { Tab, Tabs } from "./Tab";


const App = () => (
  <div>
    <Tab />
    <Tabs />
  </div>
);

render(<App />, document.getElementById("root"));

演示：https://codesandbox.io/s/rr6klxj5j4

Answer 2

你可以从你的文件中有一个默认的导出，也可以写

//index.js
export Tabs from './Tabs'
export Tab from './Tab'

将它们导出为命名导出，您可以稍后将其导入为

import { Tabs, Tab } from './Tabs'

此外，为了理解点默认导入与名为default的导出没有什么不同，因此当您编写

//index.js
export { default } from './Tabs'     // Exports the Tabs as default
export { default as Tab } from './Tab' // imports the default from Tab and exports it as Tab

你也可以把上面的代码写成

export { default } from './Tabs'
export Tab from './Tab'

在上述两种情况下，您可以将它们导入为

import Tabs, { Tab } from './Tabs'

有关更多细节，请查看Error Exporting a component without importing