主页 / 问题 / 1546497
Accepted
Oliver Patterson
Asked:2023-10-18 11:40:28 +0000 UTC2023-10-18 11:40:28 +0000 UTC

创建一个扩展 BoxProps 属性的组件

  • 772

这就是我尝试使用我的组件的方式User：

<User
    component="a"
    href="test"
    user="User"
/>

这是该组件的原型实现：

import { Box, BoxProps } from "@mui/material";

export interface IUserProps extends BoxProps
{
    user: string;
}

export default function User({ user, sx = [], ...props }: IUserProps)
{
    return (
        <Box sx={[{}, ...Array.isArray(sx) ? sx : [ sx ]]} {...props}>
            {user}
        </Box>
    );
}

我收到以下错误：

类型“{ component: "a"; user: string; href: string; }”不能分配给类型“IntrinsicAttributes & IUserProps”。
类型“IntrinsicAttributes & IUserProps”上不存在属性“href”。您指的是 “ref” 吗? TS(2322)

编辑扩展 BoxProps

javascript

1 个回答

  1. Best Answer
    import { Box, BoxProps } from "@mui/material";

export default function App() {
  return (
    <User
        component="a"
        href="test"
        user="User"
    />
  );
}

interface IUserProps
{
    user: string;
}

const  User = <C extends React.ElementType>(props: BoxProps<C, {component?: C}> 
& IUserProps )=>{
    return (
        <Box {...props}>
            {props.user}
        </Box>
    );
}

    好像可以，需要添加样式

    • 1

相关问题