reactjs - TS2322 扩展 Button 时出错，未找到组件属性。什么是正确的打字方式？

Question

我正在从 MUI v3 迁移到 v4。我有一些包装的 Button 组件，它们在常规 Material UI Button 组件上扩展了一些样式和其他属性。自从升级到 v4 后，我收到了类型错误。我正在使用 react-router-dom 作为我的路由库。

当传递 MUI v4 文档（此处：https ://material-ui.com/components/buttons/#third-party-routing-library ）中更新的 Button 示例中所写的转发 ref 组件时，我收到一个类型错误component我为包装按钮提供的道具类型中不存在。

我尝试了 Button 组件中的各种类型组合，以查看其他方法是否可行，但似乎ButtonProps应该根据构建的OverrideProps类型来涵盖它。ButtonProps

这是我在代码沙箱中的复制：

https://codesandbox.io/s/mui-button-type-issue-dihdd?from-embed

注意：在代码沙箱遍历类型时，类型错误需要一分钟才能显示出来。

标签： reactjstypescriptmaterial-ui

Answer 1

发生这种情况有两个原因：

1. ExtendedButton 包含a MUIButton（具有component属性），但ExtendedButton不是 aMUIButton本身（因此它没有component属性）。
2. 该component属性是在 上定义的OverridableComponent，而不是OverrideProps。

您需要实现组件属性并将其传递给MUIButton：

const Button: React.FC<Props & { component: React.ElementType }> = ({
  component,
  // ...
}) => (
  <MUIButton
    component={component}
    // ...
  >
    // ...
  </MUIButton>
)

作为参考，这里是componentMUI 中定义的位置：

export interface OverridableComponent<M extends OverridableTypeMap> {
  <C extends React.ElementType>(props: { component: C } & OverrideProps<M, C>): JSX.Element;
  (props: DefaultComponentProps<M>): JSX.Element;
}