Question

我正在研究TypeScript / React项目，我们正在为多步过程构建一个通用的“向导”组件。向导是一个包装器，其中包含一组“面板”组件属性，并通过IWizardPanelProps接口向每个组件公开导航逻辑。

向导组件和面板界面的实现如下：

export interface IWizardPanelProps {
  changePanel: (increment: number) => void;
}

export class WizardPanel<T> extends React.Component<IWizardPanelProps & T>{
  constructor(props: IWizardPanelProps & T) {
    super(props);
  }
}

interface IWizardProps {
  panelComponents: (typeof WizardPanel)[],
  showControls?: boolean // Hidden by default - assumes panels themselves handle pagination
}

interface IWizardState {
  panelIndex: number
}

export class Wizard extends React.Component<IWizardProps, IWizardState> {
  constructor(props: IWizardProps) {
    super(props);

    this.state = {
      panelIndex: 0
    }
  }

  changePanel = (increment: number) => {
    const newIndex = this.state.panelIndex + increment;

    this.setState({ panelIndex: newIndex });
  };

  render() {
    const { panelComponents, showControls } = this.props;

    return (
      <div>
        <p><strong>Ye olde Wizard Component! (This is a placeholder, but the functionality is mostly there)</strong></p>
        {panelComponents.map((Panel, key) => (
          <div className={key === this.state.panelIndex ? undefined : 'hidden'} key={key}>{<Panel {...this.props} changePanel={this.changePanel}></Panel>}</div>
        ))}
        {showControls && <div>
            <button disabled={this.state.panelIndex === 0} onClick={() => this.changePanel(-1)}>
            Previous
          </button>
          <button disabled={this.state.panelIndex === panelComponents.length - 1} onClick={() => this.changePanel(1)}>
            Next
          </button>
        </div>}
      </div>
    );  
  }
}

然后，当我们创建面板组件时，我们会像这样：

interface IMyPanelProps {
  ...
}


export class MyPanel extends WizardPanel<IMyPanelProps> {
  constructor(props: IWizardPanelProps & IMyPanelProps) {
    super(props);
  }
  render() {
    ...
  }
  ...
}

到目前为止好吗？

但是当我们去实现像这样的向导时：

<Wizard panelComponents={[ MyPanel ]}></Wizard>

我们收到以下错误：

类型'（typeof MyPanel）[]'无法分配给类型'（typeof   WizardPanel）[]'。

类型'typeof MyPanel'不能分配给类型'typeof   向导面板”。

类型“ MyPanel”不能分配给类型“ WizardPanel”。

属性“ props”的类型不兼容。

输入'Readonly <{children ?: ReactNode; }>＆Readonly '不可分配为类型'Readonly <{children ?: ReactNode; }>＆Readonly '。

输入'Readonly <{children ?: ReactNode; }>＆Readonly ”不能分配为类型“ Readonly ”。

有什么作用？似乎可以归结到最后一行：

Readonly<{ children?: ReactNode; }> & Readonly< IWizardPanelProps & IMyPanelProps>' is not assignable to type 'Readonly< IWizardPanelProps & T>

但是我不明白我做错了什么。我们怎么会在propComponents的IWizardProps声明中丢失Readonly<{ children?: ReactNode; }>？

Answer 1

您可以使用React.ComponentType类型。这是定义组件类型的预期方式。

interface IWizardProps {
    panelComponents: React.ComponentType<IWizardPanelProps>)[],
    showControls?: boolean 
}

问题在于WizardPanel是泛型的，而分配的类却不是，这会导致类型之间不兼容。例如，这也可以工作：

export class BasicWizardPanel extends WizardPanel<{}>{}

interface IWizardProps {
    panelComponents: (typeof BasicWizardPanel)[],
    showControls?: boolean // Hidden by default - assumes panels themselves handle pagination
}

将泛型类型的实现传递给React组件prop

1 个答案: