是否可以使用函数式继承AntD的组件从而进行扩展呢?

Question

针对AntD的组件我们可以做到class式组件继承从而进行做出自定义组件，请问下是否可以使用函数式继承AntD的组件从而进行扩展呢？

Answer 1

可以使用函数式组件对AntD的组件进行扩展。在React中，可以通过高阶组件或者通过组合来实现这个目标。简单讲下组合的实现方式。它通常更简单、更易于理解。

假如我们要扩展一个AntD的Button组件，可以创建一个自定义的函数式组件，然后在该组件内部使用AntD的Button组件：

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

const CustomButton = (props) => {
  const handleClick = () => {
    // 自定义的逻辑代码
    console.log('自定义点击处理');

    // 如果需要，可以调用传入的onClick函数
    if (props.onClick) {
      props.onClick();
    }
  };

  return (
    <Button {...props} onClick={handleClick}>
      {props.children}
    </Button>
  );
};

export default CustomButton;

在这个示例中，我们创建了一个名为CustomButton的函数式组件，它接收props作为参数。我们在这个组件内部定义了一个名为handleClick的函数，用于处理我们的自定义逻辑。然后，我们将AntD的Button组件包含在自定义组件中，并将props和自定义的handleClick函数传递给它。

这样，就可以使用组合的方式扩展AntD的组件，而不需要使用类组件进行继承。这使得代码更加简洁和易于维护。

Answer 2

ES6 之后的 class 关键字只是在原型链基础上增加的语法糖，本身并没有改变原型链的各种特性。所以理论上用传统的方法也能完成继承。

只不过没什么必要。无论是语法体验还是实际效果，老做法都没什么优势。