React,Material-UI:如何使用 typescript 将功能组件与自定义道具组合在一起
React, Material-UI: How to composition functional component with customized props using typescript
我正在尝试使 MyCustomButton 与 Material 中的 Button 组合 -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} />
);
}
而且我收到以下错误代码:
解析错误:预期的表达式。
我通过official documents in material-ui得到了一些信息,但我还没有作文。
完整代码在 https://codesandbox.io/s/jolly-dawn-keuj5
有没有人给我一些解决方案?
感谢您的宝贵时间。
我猜你不需要将两个道具传递给 <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} />
);
}
在线试用:
如果这不符合您的要求或者我遗漏了一些重要信息,请告诉我
我正在尝试使 MyCustomButton 与 Material 中的 Button 组合 -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} />
);
}
而且我收到以下错误代码: 解析错误:预期的表达式。
我通过official documents in material-ui得到了一些信息,但我还没有作文。
完整代码在 https://codesandbox.io/s/jolly-dawn-keuj5
有没有人给我一些解决方案?
感谢您的宝贵时间。
我猜你不需要将两个道具传递给 <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} />
);
}
在线试用:
如果这不符合您的要求或者我遗漏了一些重要信息,请告诉我