扩展默认的className组件

Question

嘿，我使用引导和反应，我试着找出，如何通过传递更深的className道具来扩展我的组件。在我的原子组件中有两个文件。第一个具有组件声明。

Breadcrumb.js

export const Breadcrumb = (props) => {
  const { className } = props;
  const classes = getClasses(className);

  return (
    <Link to={props.path} className={classes} {...props}>
      {props.children}
    </Link>
  );
};

另一个带有getClasses()的类返回所有默认的BS类。

Breadcrumb.style.js

export const getClasses = (extra = "") => {
  const defaultClasses = getDefaultClasses();
  const addingClasses = extra;
  const classes = `${defaultClasses} ${addingClasses}`;

  return classes;
};

const getDefaultClasses = () => `ps-3 fs-3 fw-bold text-decoration-none`;

我想要实现的是，当我调用我的Breadcrumb组件时，我将决定在额外的类上扩展它，我可以通过传递className props...like来实现这一点。

TopBar.js

export const TopBar = () => {
  const breadcrumbs = useBreadcrumbs(routes, { disableDefaults: true });
  const classes = getClasses();

  return (
    <div className={classes}>
      {breadcrumbs.map(({ match, breadcrumb }) => (
        <Breadcrumb
          path={match.pathname}
          children={breadcrumb}
          className="cs_breadcrumb"
          key={uuidv4()}
        />
      ))}
    </div>
  );
};

但是当我这样做的时候，我的声明className是通过调用Breadcrumb className覆盖的.尽管在Breadcrumb.js中，console.log(类)返回连接的类。有人知道如何做到这一点，或者有什么建议吗？我会很高兴的

Answer 1

变化

export const Breadcrumb = (props) => {
  const { className } = props;
  const classes = getClasses(className);

  return (
    <Link to={props.path} className={classes} {...props}>
      {props.children}
    </Link>
  );
};

至

export const Breadcrumb = ({ className, ...rest }) => {
  const classes = getClasses(className);

  return (
    <Link to={props.path} className={classes} {...rest}>
      {props.children}
    </Link>
  );
};

因此，您需要在className所在的位置提取props道具，并为其他道具添加...rest。

Answer 2

我想您希望用其他通过道具传递的类扩展组件类。

如果我的理解是正确的，你可以这样做：

export const Breadcrumb = (props) => {
  const { className } = props;
  const classes = getClasses(className);

  return (
    <Link to={props.path} className={[classes, className].join(" ")]} 
    {...props}>
      {props.children}
    </Link>
  );
};