javascript - 具有 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) => (
  …
));