Material-UI Button 组件如何推断传递给 `component` prop 的组件的 props? [英] How does Material-UI Button component infer the props for the component passed to `component` prop?

问题描述

如果我在 component 道具中传递特定组件，谁能解释 Material-UI 如何使用我的组件的道具扩展其 Button 组件的道具?

接口 MyLinkProps 扩展 ButtonBaseProps {someRandomProp:字符串}const MyLink: React.FC<MyLinkProps>= () =>{返回 <div></div>}<Button component={MyLink} someRandomProp=random">Something</Button>

在本例中，Button 组件现在知道属于我的组件的 someRandomProp 属性；正在传递给 Button 组件上的 component 属性.

我想达到同样的效果.我有一个 Image 组件，它有一个 prop component 我想推断正在传递的组件的 props.

例如，如果有类似的东西:

<MyImage 组件={NextImage} {...propsOfNextImage}/>

基本上，我希望 MyImage 能够自动检测和扩展 NextImage 的 props.

解决方案

可以看到OverridableComponent的类型定义

Can anyone please explain how Material-UI extends the props of its Button component with the props of my component if I pass a specific component in the component prop?

interface MyLinkProps extends ButtonBaseProps {
  someRandomProp: string
}

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

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

As in this case, the Button component is now aware of the someRandomProp prop that belongs to my component; which is being passed to component prop on the Button component.

I would like to achieve the same effect. I have an Image component which has a prop component which I would like to infer the props of the component that is being passed.

For example, if there is something like:

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

Basically, I would like MyImage to auto-detect and extend the props of NextImage.

解决方案

You can see the type definition of OverridableComponent here, this one is responsible for merging the props of the overridable component with the original props of the component.

For reference, see how it's used in a MUI component here. The first generic type parameter is a type with the following properties:

• props: The original props of your component before being merged with the props of the overridable component.
• defaultComponent: The default root component if you don't provide any.

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>

Live Demo

这篇关于Material-UI Button 组件如何推断传递给 `component` prop 的组件的 props?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！