时间戳

首页 > 解决方案 > 使用 HOC 命名的导出

javascript - 使用 HOC 命名的导出

问题描述

问题

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

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

一切都好。但是现在在我导出我的组件之前，我想用一个 HOC 来包装它，withStyles比如MaterialUI。现在我想做类似的事情：

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);

因为我不喜欢默认导出，因为它们有很多缺点，所以我不喜欢那个解决方案。

2) 在包装之前为我的组件使用像“Raw”这样的前缀：

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

像这样导出：

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

我也更喜欢这种方法，但要权衡添加这个前缀。

其他解决方案

你如何在你的项目中处理这个问题？是否已经有最佳实践解决方案？对我来说，我的组件有一个命名导出非常重要，因此我根本无法接受具有默认导出的解决方案。

先感谢您。

标签： javascriptreactjstypescriptecmascript-6

解决方案

只需在一个语句中执行此操作：

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

推荐阅读