Question

我正在尝试使用TypeScript中的装饰器将上下文中的变量注入到组件中。例如，像这样消费：

@Themeable
class Button extends React.Component<Props, State> {
  public render() {
    const { theme: { palette: { primary } } } = this.props;
    return (<button style={{ backgroundColor: primary }} />);
  }
}

但是，我在键入HOC时遇到很多麻烦，以至于它随意绑定到任何组件（包括无状态功能组件）

以下是我的主要尝试：

export default function themeWrapper<Props>(
  COMPONENT: React.ComponentClass<Props & WithTheme> | React.SFC<Props & WithTheme>,
) {
  const themeable: React.SFC<Props & WithTheme> = (
    props: Props & WithTheme,
    { theme }: Context,
  ) => (
      <COMPONENT {...props} theme={merge(defaultTheme, theme)} />
    );

  themeable.contextTypes = {
    theme: PropTypes.object.isRequired,
  };

  return themeable;
}

我不断收到以下错误：

输入＆＃39; StatelessComponent＆＃39;不提供签名＆＃39; new（道具？：道具，上下文？：任何）的匹配：按钮＆＃39;

创建从 context 注入变量的高阶组件的适当方法是什么

TypeScript：使用HOC将上下文变量注入到props中

0 个答案: