Question

我正在寻找一种将反应材料设计与打字稿结合使用的模式，但是我遇到了一些问题。

导出默认设置似乎是一种反模式，并且我的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);

Answer 1

仅将样式化的组件导出为命名导出？

import * as React from "react";
import s from './Styleguide.scss';

export namespace Header {
  export interface Props {
  }
}

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

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

const Header = withStyles(s)(BareHeader);

export { Header };

将材料设计用于带有打字稿的React

1 个答案: