如何使用打字稿和样式组件提升非反应静态？

Question

我将静态的三个静态属性（Header、Body 和 Footer）设置为 Dialog 组件。但是，在将 Dialog 组件包装在 styled-components.

之后，打字稿会抛出以下错误

Property 'Header' does not exist on type 'StyledComponentClass...

这是我的 /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)``;

这是我的index.ts，我将它们拼凑在一起：

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;

我试过执行以下操作，但现在根 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;

抛出 Cannot call a class as a function 错误的插值示例：

export default styled(InterpolationExample)`
  ${Dialog.Header} { /* WORKS :) */
    border: 1px solid green;
  }
  ${Dialog} { { /* Throws Error :/ */
    border: 1px solid pink;
  }
`;

Answer 1

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

我最后做的是从 styled-components 导入 StyledComponentClass，然后按以下方式使用静态属性扩展它：

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

接下来，我将返回的 StyledComponent 转换为我的新扩展类型 WithSubmodules:

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;

再说一次，如果有人有更好的方法，请告诉我！

谢谢

如何使用打字稿和样式组件提升非反应静态？

How to hoist non react statics with typescript and styled-components?

javascript

typescript

reactjs

styled-components