我正在寻找一种模式,使用反应材料设计与打字稿,但我有一些问题 .

  • export defaults似乎是反模式,我的tsconfig中的选项不允许我这样做 . 我想知道他们是一个更好的方法来做到这一点,而不通过tsconfig禁用它 .

  • 如果某个组件具有使用类而不是函数的状态,我将如何将withstyles应用于类 .

有没有人可以帮助我将withstyles应用到我典型的有状态组件模式而不引入反模式 .

典型的Statefull组件模式:

import * as React from "react";

export namespace Header {
  export interface Props {
  }
}

export class Header extends React.Component<Header.Props> {
  constructor(props: Header.Props, context?: any) {
    super(props, context);
  }

  public render(): JSX.Element {
    return (
      <div> HEADER HTML </div>
    );
  }
}

材料UI推荐方法:

import s from './Styleguide.scss';

function Styleguide() {
    ...
}

function LinksComponent() {
    ...
}

function ButtonsComponent() {
    ...
}

const Links = withStyles(s)(LinksComponent);
const Buttons = withStyles(s)(ButtonsComponent);

export {
    Links,
    Buttons
};

export default withStyles(s)(Styleguide);