时间戳

首页 > 解决方案 > 带有组件道具的 MaterialUI Button HOC

reactjs - 带有组件道具的 MaterialUI Button HOC

问题描述

我正在尝试为 MaterialUI Button 组件实现 HOC：

import {Button as MUIButton, ButtonProps} from '@material-ui/core';
import * as React from 'react';

export const Button = (props: ButtonProps) => <MUIButton {...props} />;

我像这样使用它：

import {Button} from '../hocs/button.tsx';
import {Link} from 'react-router-dom';

...

<Button
  variant='contained'
  color='primary'
  component={Link}
  to={`${url}/new`}
>
  Add something
</Button>

但我遇到了一个错误

类型“IntrinsicAttributes & { children?: ReactNode;”上不存在属性“组件” 类？：{根？：字符串| 不明确的; 标签？：字符串 | 不明确的; 文本？：字符串 | 不明确的; textPrimary?: 字符串 | 不明确的; ... 24 更多 ...; iconSizeLarge?: 字符串 | 不明确的; } | 不明确的; ... 9 更多 ...; 变种？：“文本”| ... 2 更多 ... | 不明确的; } & 选择<......'。TS2322

那么，我做错了什么以及如何解决它？

提前谢谢。

编辑：我想，问题是 ButtonProps 是通用的，取决于props.component类型。

标签： reactjstypescriptmaterial-ui

解决方案

找到解决方案。重点是复制默认的扩展接口。

https://github.com/mui-org/material-ui/issues/19461#issuecomment-581523926

推荐阅读