reactjs - React，Material-UI：如何使用 typescript 组合具有自定义道具的功能组件

Question

我正在尝试使 MyCustomButton 与 Material-ui 中的 Button 组合

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

interface MyButtonProps {
  'aria-label': string, // I'd like to add a aria-label as required property
  myOptionalProperty?: string
}

export default function MyButton(buttonProps: ButtonProps, myButtonProps: MyButtonProps) {
  return (
    <Button {...buttonProps, ...myButtonProps} />
  );
}

而且我有一个错误代码如下： 解析错误：表达式预期。

我通过material-ui 中的官方文档获得了一些信息，但我还没有完成构图。

完整代码在https://codesandbox.io/s/jolly-dawn-keuj5

有没有人给我一些解决方案？

感谢您的时间。

Answer 1

猜你不需要传递两个道具<Button />

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

interface MyButtonProps {
  title: string,
  myOptionalProperty?: string
}

export default function MyButton<P extends ButtonProps>(myButtonProps: MyButtonProps) {
  return (
    <Button {...myButtonProps as P} />
  );
}

---

在线尝试：

---

如果这不符合您的要求或我错过了重要的事情，请告诉我