Question

我有一个设置为toggleItalics()组件的静态三个静态属性（@IBAction func pressedBold(_ sender: UIButton) { textBox.toggleBoldface(self) }，Header和Body）。但是，在将Footer组件包装到样式组件中后，打字稿会引发以下错误。

Dialog

这是我的Dialog：

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;

Answer 1

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

我最终要做的是从StyledComponentClass导入styled-components，然后通过以下方式用静态属性对其进行扩展：

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;

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

谢谢

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

1 个答案: