React, Material-UI: Как скомпоновать функциональный компонент с настраиваемым реквизитом, используя машинопись

Question

Я пытаюсь создать композицию MyCustomButton с помощью Button в Material-ui

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} />
  );
}

И у меня появляется следующий код ошибки: Ошибка синтаксического анализа: ожидается выражение.

Я получил некоторую информацию через официальные документы в материале-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} />
  );
}

---

Попробуйте онлайн:

---

Сообщите мне, если это не соответствует вашим требованиям, или я пропустил что-то важное