проблема
Предположим, у меня есть 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);
Мне нравится этот подход гораздо больше, также как и компромисс с добавлением этого префикса.
Другие решения
Как вы справляетесь с этим в своих проектах? Есть ли уже лучшее решение? Для меня очень важно иметь именованный экспорт для моего компонента, чтобы я вообще не мог принять решение с экспортом по умолчанию.
Заранее спасибо.