React+Material-UI+TypeScript：自定义属性组件组合报错求助

我来帮你梳理下代码里的问题，主要有几个关键错误需要修正：

1. React组件参数的错误定义 #

React函数组件只能接收一个props对象参数，你现在把props拆成了buttonProps和myButtonProps两个独立参数，这违反了React组件的基本定义规则，也是导致语法解析错误的核心原因。

2. 类型定义需要合并 #

你需要把自定义的MyButtonProps和Material-UI的ButtonProps做交叉类型，这样才能让自定义属性和原生Button属性兼容，同时确保aria-label是必填项。

3. 对象展开的写法规范 #

虽然JSX里支持展开多个对象，但前提是你的props已经是一个合并后的对象结构。

修正后的完整代码 #

import React from "react";
import { Button, ButtonProps } from "@material-ui/core";

// 交叉自定义属性与ButtonProps，同时将aria-label设为必填
interface MyButtonProps extends ButtonProps {
  'aria-label': string; // 覆盖ButtonProps中的可选aria-label，设为必填
  myOptionalProperty?: string;
}

export default function MyButton(props: MyButtonProps) {
  // 直接将所有props传递给Button组件
  return <Button {...props} />;
}

额外说明 #

• 这里通过extends ButtonProps让自定义接口继承Material-UI的Button属性，同时重写aria-label为必填项，这样既保留了原生Button的所有属性，又满足了你自定义的必填要求。
• 如果你的myOptionalProperty需要在组件内部做额外处理，可以在组件里解构出来，比如：

export default function MyButton({ myOptionalProperty, ...restProps }: MyButtonProps) {
  // 在这里处理myOptionalProperty的逻辑
  return <Button {...restProps} />;
}

内容的提问来源于stack exchange，提问作者SteveBack