用材料设计与打字稿反应

Question

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

1. 导出默认值似乎是一种反模式，而我的tsconfig中的选项将不允许我这样做。我想知道他们是否有更好的方法来做到这一点，而不通过tsconfig禁用它。
2. 对于使用类而不是函数的状态组件，我将如何将with样式应用到类中。

谁能帮我把anti样式应用到我典型的有状态组件模式，而不引入反模式。

典型状态组件模式：

​

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

​

材料用户界面推荐方法：

​

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