如何正确扩展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似乎是实现自己所从事工作的最佳方式。