禁止默认导出

Question

我最近读到我们不应该使用默认导出，但我不确定我是否正确理解了它。例如，我使用的是：

(1)

const PanelHomePage = () => (
  <div>
    <Wrapper>
      <Typography paragraph>
        Here will be the main text
      </Typography>
    </Wrapper>
  </div>
);

export default PanelHomePage;

那么这是否意味着我应该使用(1)而不是(2)：

(2)

export default function PanelHomePage() {
}

或者我应该根本不使用默认这个词。如果是这种情况，那么我如何导出整个页面/函数？

另一个例子：

function LoginPage() {
}

export default LoginPage;

这工作得很好，但如果我删除默认单词，它会抛出一个错误。

这是不是更好了？

export function LoginPage() {}

这里：https://stackoverflow.com/a/61208572/12541823

Answer 1

这两种方法都是正确的，并不是被禁止的。然而，这是您或您的公司的选择，他们喜欢的方式。我喜欢单独的export default语句，因为它允许您导出组件的多个版本，例如，您可以导出一个简单的组件和包装的版本

​

export const PanelHomePage = () => (
  <div>
    <Wrapper>
      <Typography paragraph>
        Here will be the main text
      </Typography>
    </Wrapper>
  </div>
);


export default connect(mapStateToProps)(PanelHomePage);

​