Question

有人可以解释export default Example;，export { default } Example;和export default class Example extends Component {};

之间的差异

我在网上看过所有3个例子。我使用export default class Example extends Component {}遇到问题，其中react表示我在模块中只能有1个默认导出。

我避免使用哪一个，使用一个优于另一个？

Answer 1

让我们看一个示例类

export default class MyComponent extends React.Component {
 ...
}

同一组件的另一个例子可以写成如下

export class MyComponent extends React.Component {
 ...
}
export default MyComponent

最后，您可以在组件文件中使用多个类。

export MyComponent extends React.Component {
 ...
}
export MyComponent2 extends React.Component {
 ...
}

现在，当我使用

导入MyComponent时

import MyComponent from "../components/MyComponent"

将导出默认类。

现在，如果我想从组合了组件的文件中导出特定组件。我可以做到以下几点：

import { MyComponent2 } from "../components/MyComponent"

括号允许您导入要导入的类/对象/文件的单个要素。暂时不使用语法，这是default关键字创建的行为。这允许您仅从库和框架导入特定功能，而不必导入所有内容，这是“默认”通常所暗示的。