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

IT技术 reactjs typescript material-ui next.js
2021-05-16 23:42:14

Button如果我在props中传递特定组件，任何人都可以解释 Material-UI 如何使用我的组件的props扩展其组件的propscomponent吗？

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上的 prop Button。

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

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

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

基本上，我想MyImage自动检测和扩展NextImage.

1个回答

你可以看到OverridableComponent 这里的类型定义，这个负责将可覆盖组件的props与组件的原始props合并。

作为参考，请在此处查看它在 MUI 组件中的使用方式。第一个泛型类型参数是具有以下属性的类型：

  • 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>
  );
};

用法

{/* 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>

现场演示

代码沙盒演示

其它你可能感兴趣的问题
上一篇用于模拟按钮闩锁弹簧的力学 下一篇带有 React Hooks 的可重用下拉菜单