如何包装组件并继承其 props 接口

Question

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

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

我能以某种方式采用该定义并将其扩展为我自己的组件吗？我不想重新定义像“类型”这样的道具，只是通过它们。

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;
}

这会导致导入错误：“导入声明与 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

现在 Antd 的 props 被导出为 type 这似乎是解决它的方法：

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}
      />
    );
  }
}

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;
}

返回 promise 的 onClick 处理程序已经与当前的 ButtonProps 接口兼容，所以我认为这对我来说不是必需的。但这显示了添加另一个名为 foo 的可选道具。

Answer 3

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

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

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

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

MyButton.propTypes = propTypes;