用HOC命名出口

Question

问题

让我们考虑我有一个SFC（我正在使用TypeScript）并将其导出为：

export const AppShell: React.SFC<Props> = (props: Props) => (
  ...
)

很好。但是现在，在导出组件之前，我想用MaterialUI中的withStyles这样的HOC封装它。现在我想做类似的事情：

const AppShell: React.SFC<Props> = (props: Props) => (
 ...
)

并将其导出为：

export const AppShell = withStyles(styles)<Props>(AppShell);

当然会导致错误：

[ts] Cannot redeclare block-scoped variable 'AppShell'.

需要权衡的解决方案

据我所知，我现在有两个选择：

1）使用默认导出：

export default withStyles(styles)<Props>(AppShell);

因为我不喜欢默认导出，因为它们有很多disadvantages，所以我不赞成这种解决方案。

2）在组件被包裹之前，为它们使用诸如“ Raw”之类的前缀：

const RawAppShell: React.SFC<Props> = (props: Props) => (
 ...
)

将其导出为：

export const AppShell = withStyles(styles)<Props>(RawAppShell);

在添加此前缀的权衡下，我也更喜欢这种方法。

其他解决方案

您如何在项目中处理此问题？已经有最佳实践解决方案了吗？对我来说，非常重要的一点是，我为组件指定了导出名称，因此我完全不能接受默认导出的解决方案。

谢谢。

Answer 1

只需一个语句即可完成

key2