Javascript 如何使用typescript和样式化组件提升非react静态？

我有三个静态属性（

页眉

，

正文

，和

页脚

）设置为

对话框

组件。但是，typescript在将

对话框

组件包装到样式化组件中后引发以下错误

类型“StyledComponentClass…”上不存在属性“Header”。

这是我的

/Dialog.tsx

：

import { Dialog as BlueprintDialog, IDialogProps } from '@blueprintjs/core';
import * as React from 'react';
import styled from 'styled-components';

import Body from './Dialog.Body';
import Footer from './Dialog.Footer';
import Header from './Dialog.Header';

/** ************************************************************************* */

type DefaultProps = {
  className: string;
};

export interface DialogProps extends IDialogProps {
  children?: React.ReactNode;
  className?: string;
  primary?: boolean;
}

class Dialog extends React.PureComponent<DialogProps> {
  static displayName = 'UI.Dialog';
  static defaultProps: DefaultProps = {
    className: '',
  };
  static Body: typeof Body;
  static Footer: typeof Footer;
  static Header: typeof Header;
  render() {
    return <BlueprintDialog {...this.props} />;
  }
}

/** ************************************************************************* */

export default styled(Dialog)``;

我尝试过执行以下操作，但现在根

对话框

组件的插值失败：

import { Dialog as BlueprintDialog, IDialogProps } from '@blueprintjs/core';
import * as React from 'react';
import styled from 'styled-components';

import Body from './Dialog.Body';
import Footer from './Dialog.Footer';
import Header from './Dialog.Header';

/** ************************************************************************* */

type DefaultProps = {
  className: string;
};

export interface DialogProps extends IDialogProps {
  children?: React.ReactNode;
  className?: string;
  primary?: boolean;
}

class Dialog extends React.PureComponent<DialogProps> {
  static displayName = 'UI.Dialog';
  static defaultProps: DefaultProps = {
    className: '',
  };
  render() {
    return <BlueprintDialog {...this.props} />;
  }
}

/** ************************************************************************* */

const Styled = styled(Dialog)``;

class WithSubmodules extends Styled {
  static Body: typeof Body;
  static Footer: typeof Footer;
  static Header: typeof Header;
}

export default WithSubmodules;

---

所以我做了一些修补，找到了一些工作。如果有人有更好的方法，请告诉我

我最后做的是从

样式化组件

导入

样式化组件类

，然后通过以下方式使用静态属性对其进行扩展：

interface WithSubmodules extends StyledComponentClass<DialogProps, {}> {
  Body: typeof Body;
  Footer: typeof Footer;
  Header: typeof Header;
}

以下是所有内容：

import Dialog from './Dialog';
import DialogBody from './Dialog.Body';
import DialogFooter from './Dialog.Footer';
import DialogHeader from './Dialog.Header';

Dialog.Body = DialogBody; // TS Compilation Error :/
Dialog.Footer = DialogFooter; // TS Compilation Error :/
Dialog.Header = DialogHeader; // TS Compilation Error :/
export default Dialog;

import { Dialog as BlueprintDialog, IDialogProps } from '@blueprintjs/core';
import * as React from 'react';
import styled, { StyledComponentClass } from 'styled-components';

import Body from './Dialog.Body';
import Footer from './Dialog.Footer';
import Header from './Dialog.Header';

/** ************************************************************************* */

type DefaultProps = {
  className: string;
};

export interface DialogProps extends IDialogProps {
  children?: React.ReactNode;
  className?: string;
  primary?: boolean;
}

class Dialog extends React.PureComponent<DialogProps> {
  static displayName = 'UI.Dialog';
  static defaultProps: DefaultProps = {
    className: '',
  };
  render() {
    return <BlueprintDialog {...this.props} />;
  }
}

/** ************************************************************************* */

interface WithSubmodules extends StyledComponentClass<DialogProps, {}> {
  Body: typeof Body;
  Footer: typeof Footer;
  Header: typeof Header;
}

export default styled(Dialog)`` as WithSubmodules;

从'@blueprintjs/core'导入{Dialog as BlueprintDialog，IDialogProps}；
从“React”导入*作为React；
从“styled components”导入styled，{StyledComponentClass}；
从“./Dialog.Body”导入正文；
从“./Dialog.Footer”导入页脚；
从“./Dialog.Header”导入标题；
/** ************************************************************************* */
类型DefaultProps={
类名：string；
};
导出接口对话框PROPS扩展IDialogProps{
子节点？：React.ReactNode；
类名？：字符串；
初级？：布尔型；
}
类对话框扩展了React.PureComponent{
静态显示名称='UI.Dialog'；
静态defaultProps:defaultProps={
类名：“”，
};
render（）{
返回；
}
}
/** ************************************************************************* */
与子模块的接口扩展了StyledComponentClass{
主体：主体类型；
页脚：页脚的类型；
标题：标题的类型；
}
导出默认样式（对话框）``作为子模块；

同样，如果有人有更好的方法，请让我知道

谢谢

export default styled(Dialog)`` as WithSubmodules;

import { Dialog as BlueprintDialog, IDialogProps } from '@blueprintjs/core';
import * as React from 'react';
import styled, { StyledComponentClass } from 'styled-components';

import Body from './Dialog.Body';
import Footer from './Dialog.Footer';
import Header from './Dialog.Header';

/** ************************************************************************* */

type DefaultProps = {
  className: string;
};

export interface DialogProps extends IDialogProps {
  children?: React.ReactNode;
  className?: string;
  primary?: boolean;
}

class Dialog extends React.PureComponent<DialogProps> {
  static displayName = 'UI.Dialog';
  static defaultProps: DefaultProps = {
    className: '',
  };
  render() {
    return <BlueprintDialog {...this.props} />;
  }
}

/** ************************************************************************* */

interface WithSubmodules extends StyledComponentClass<DialogProps, {}> {
  Body: typeof Body;
  Footer: typeof Footer;
  Header: typeof Header;
}

export default styled(Dialog)`` as WithSubmodules;