带有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

只需在一条语句中完成：

export const AppShell: React.SFC<Props> = withStyles(styles)<Props>((props: Props) => (
  …
));