Question

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

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

我可以以某种方式采用该定义并将其扩展为我自己的组件吗？我不想重新定义像＆＃34;类型＆＃34;这样的道具，只是将它们传递出去。

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

这会导致导入错误：＆＃34;导入声明与ButtonProps的本地声明冲突＆＃34;

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

我曾经用

来解决这个问题

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

毕竟事实证明这很容易。

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 2

我不熟悉打字稿，这会有用吗？

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

我们用es6做类似的事情并且运作良好

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

MyButton.propTypes = propTypes;

Answer 3

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

package com.edf.mobile.tests;

import io.appium.java_client.AppiumDriver;
import io.appium.java_client.android.AndroidDriver;
import io.appium.java_client.android.AndroidElement;
import io.appium.java_client.remote.MobileCapabilityType;
import org.openqa.selenium.remote.DesiredCapabilities;
import org.testng.annotations.BeforeTest;

import java.io.File;
import java.net.MalformedURLException;
import java.net.URL;

public class BaseTest {
    public AppiumDriver<?> driver;
    //initialize your driver here
    @BeforeTest
    public void beforeTest(){
        File f = new File("src");
        File fs=new File(f,"ApiDemos-debug.apk");

        DesiredCapabilities cap = new DesiredCapabilities();
        cap.setCapability(MobileCapabilityType.DEVICE_NAME, "192.168.56.101:5555");
        cap.setCapability(MobileCapabilityType.APP,fs.getAbsolutePath());
        try {
            driver = new AndroidDriver<>(new URL("http://127.0.0.1:4723/wd/hub"),cap);
        } catch (MalformedURLException e) {
            e.printStackTrace();
        }
    }
}

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

3 个答案: