javascript - 如何正确扩展 React Bootstrap 组件？

Question

假设我有一个要为其添加尺寸的徽章组件。这就是我目前的做法:

import React from 'react';
import Badge from 'react-bootstrap/Badge';
import classNames from 'classnames';

const BadgeExtended = props => {
  const {className, size, ...attr} = props;
  const classes = classNames(
    className,
    size && `badge-${size}`
  );

  return <Badge className={classes} {...attr}>{props.children}</Badge>;
};

export default BadgeExtended;

效果不错。这是正确的方法吗？有没有一种方法可以扩展原始组件，这样我就不必导入扩展组件，而是使用 react-bootstrap/Badge 代替？

Answer 1

我认为你想出的方法是正确的。如果您查看存储库 ( here )，Badge 组件是函数式的，而不是一个类，因此无法使用 extend 关键字。

制作an HOC这似乎是实现您正在做的事情的最佳方式。