Material-UI Button 组件如何推断传递给“component” prop 的组件的 props？

谁能解释一下 Material-UI 如何扩展其 propsButton如果我在component prop?

interface MyLinkProps extends ButtonBaseProps {
  someRandomProp: string
}

const MyLink: React.FC<MyLinkProps> = () => {
  return <div></div>
}

<Button component={MyLink} someRandomProp="random">Something</Button>

正如在本例中，Button组件现在知道了someRandomProp属于我的组件的 prop；正在传递给component支撑在Button成分。

我想达到同样的效果。我有一个带有 prop 的图像组件component我想推断正在传递的组件的属性。

例如，如果有类似的内容：

<MyImage component={NextImage} {...propsOfNextImage} />

基本上，我想要MyImage自动检测并扩展 propsNextImage.

可以看到类型定义OverridableComponent here，这个负责合并可重写组件与组件的原始道具。

作为参考，请参阅如何在 MUI 组件中使用它here。第一个泛型类型参数是具有以下属性的类型：

• props：组件的原始 props 在与可重写组件的 props 合并之前。
• defaultComponent：默认根组件（如果您未提供任何根组件）。

import { OverridableComponent } from '@mui/material/OverridableComponent';

interface MyImageProps {
  src: string;
  myCustomProps?: string;
}
interface MyImageTypeMap {
  props: MyImageProps;
  defaultComponent: 'img';
}

const MyImage: OverridableComponent<MyImageTypeMap> = (props) => {
  const RootComponent = props.component || 'img';
  return (
    <RootComponent src={props.src} {...props}>
      {props.children}
    </RootComponent>
  );
};

Usage

{/* normal component with MyImageProps. The root component is an img element */}
<MyImage src={src} />
{/* component with MyImageProps & ButtonProps. The root component is a Button*/}
<MyImage src={src} component={Button} variant="contained">
  I am actually a button in disguise
</MyImage>

现场演示