他们正在使用Object.assign来分配“子组件”。

const Card: BsPrefixRefForwardingComponent<'div', CardProps> = React.forwardRef<
  HTMLElement,
  CardProps
>(
  (
    {
      props
    },
    ref,
  ) => {
    return (
      <Component
        ...
      </Component>
    );
  },
);

Card.displayName = 'Card';
Card.propTypes = propTypes;
Card.defaultProps = defaultProps;

export default Object.assign(Card, {
  Img: CardImg,
  Title: CardTitle,
  Subtitle: CardSubtitle,
  Body: CardBody,
  Link: CardLink,
  Text: CardText,
  Header: CardHeader,
  Footer: CardFooter,
  ImgOverlay: CardImgOverlay,
});

来源

1.可能有多种方法可以达到你的目标，最基本的方法是给组件设置一些名称，并检查每个子组件的名称（react docs），但我不推荐这样做。
1.相反，您应该正确地设置MyComponent.Left和MyComponent.Right的样式，以便无论它们传递给MyComponent的子级的顺序如何，都能以所需的方式显示它们。
大致说明我的意思：

function MyComponent(props:PropsWithChildren):JSX.Element{
  return (
    <div>{props.children}</div>
  );
}

function MyComponent.Left = function MyComponentLeft(props:PropsWithChildren){
   return (<div className="this-goes-on-the-left">props.children</div>);
}
function MyComponent.Right = function MyComponentRight(props:PropsWithChildren){
   return (<div className="this-goes-on-the-right">props.children</div>);
}

样式化嵌套组件的类的实现可以基于flex-box规则，或者浮动或者适合您的用例的任何规则。
1.还有一个选项与示例稍有不同，但可能有用，那就是将组件作为 prop 传递，而不是像下面这样的子对象：

function MyComponent(props:PropsWithChildren):JSX.Element{
  return (
    <div>
       <div className="this-goes-on-the-right">{props.right}</div>
       <div className="this-goes-on-the-left">{props.left}</div>
    </div>
  );
}