Question

我来到了一个执行此操作的代码库

if (row.details.getVisibility()!=View.VISIBLE)
    {
        row.details.setVisibility(View.VISIBLE);
        row.root.setActivated(true);
        row.details.animate().alpha(1).setStartDelay(500);
    }
    else
    {
        row.root.setActivated(false);
        row.details.setVisibility(View.GONE);
        row.details.setAlpha(0);
    }
    TransitionManager.beginDelayedTransition(recycler);

可以理解的是，作者将Tab文件放在Tab文件夹下，以便在其他地方他可以进行导入＆＃39; ./ Tabs＆＃39;但为什么在index.js中他需要解构？

Answer 1

许多人都遵循这种命名法，其中索引文件只是导出，然后使导入更容易。

它允许您从Tabs文件夹导入而不明确说出index.js文件名。最重要的是，它允许您在一个语句中从文件夹Tab导入内容。

例如：

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

//主文件

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了解更多详情

使用deconstruct导出默认用法

2 个答案: