如何包装一个组件并继承它的 props 接口

Question

我想扩展一个Button组件并扩展它的props接口类型，以便接受和传递普通Button拥有的所有props。在下面的示例中，我创建了一个按钮，它从它的 onClick 函数接收承诺，并在等待它解析时显示加载器。

我的问题似乎是编译器不知道在哪里可以找到 ButtonProps，它可能是在自己的命名空间中定义的。

我能否以某种方式采用该定义并将其扩展到我自己的组件中？我不想重新定义像 "type" 这样的 props，然后直接传递它们。

import React from 'react';
import { Button } from 'antd';

// extend interface already defined in antd
interface ButtonProps {
  onClick: (event: any) => Promise<any>;
}

interface AsyncButtonState {
  loading: boolean;
}

export class AsyncButton extends React.Component<
  ButtonProps,
  AsyncButtonState
> {
  public state = {
    loading: false,
  };

  public render() {
    return (
      <Button
        {...this.props}
        onClick={this.handleClick}
        loading={this.state.loading}
      />
    );
  }

  private handleClick = async evt => {
    this.setState({ loading: true });
    await this.props.onClick(evt);
    this.setState({ loading: false });
  };
}

export default AsyncButton;

---- 编辑 ----

我找到了从antd导入ButtonProps接口的方法。现在我只需要弄清楚我认为如何扩展它。

import { ButtonProps } from 'antd/lib/button';

interface ButtonProps {
  onClick: (event: any) => Promise<any>;
  children: React.ReactNode;
}

这会导致导入错误："import declaration conflicts with local declaration of ButtonProps"

----- 再次编辑 ----

我曾经用

解决这个问题

import { Button } from 'antd';
import { ButtonProps } from 'antd/lib/button';

interface AsyncButtonState {
  loading: boolean;
}

interface AsyncButtonProps extends ButtonProps {
  onClick: (event: any) => Promise<any>;
  foo?: string;
}

...但现在看来 ButtonProps 不再作为接口导出，而是作为类型导出。现在怎么办？

Answer 1

我不熟悉打字稿，这行得通吗？

interface ButtonProps {
  onClick: (event: any) => Promise<any>;
  ...Button.propTypes
}

我们用 es6 做了类似的事情并且效果很好

const propTypes = {
   something: PropTypes.string,
   ...Button.propTypes
}

MyButton.propTypes = propTypes;

Answer 2

毕竟还是很容易的。

import { Button } from 'antd';
import { ButtonProps } from 'antd/lib/button';

interface AsyncButtonState {
  loading: boolean;
}

interface AsyncButtonProps extends ButtonProps {
  onClick: (event: any) => Promise<any>;
  foo?: string;
}

返回承诺的 onClick 处理程序已经与当前的 ButtonProps 接口兼容，所以我认为我不需要它。但这表明添加了另一个名为 foo 的可选道具。

Answer 3

现在 Antd 道具被导出为类型这似乎是解决它的方法：

import { Button } from 'antd';
import { ButtonProps } from 'antd/lib/button';

interface AsyncButtonProps {
  onClick: (event: any) => Promise<any>;
  foo?: string;
}

export class AsyncButton extends React.Component<
  AsyncButtonProps & ButtonProps,
  AsyncButtonState
> {
  public render() {
    return (
      <Button
        {...this.props}
        onClick={this.handleClick}
        loading={this.state.loading}
      />
    );
  }
}

如何包装一个组件并继承它的 props 接口

How to wrap a component and inherit its props interface

typescript

antd