我使用外部UI库，该库具有Button组件。我想构建一个NewButton组件，该组件将从库Button组件中获取所有道具，并接受一些我将在其之上添加的额外道具（例如“ url”和“ text”，如下所示）。
我尝试了类似的方法，不确定实际的“ ... libraryButtonProps”在哪里放置：
import * as React from "react";
import { Button } from "library/buttons";
interface NewButtonProps {
text: string;
url: string;
}
export const NewButton = ({ text, url, ...libraryButtonProps }: NewButtonProps) => (
<div>
<a href={url}>
<Button>
{text}
</Button>
</a>
</div>
);例如，我不需要在那个Button内编写disable = {disabled}的代码，因为它已经从该库中内置了。
使用
extends关键字将自己的道具添加到库组件的现有道具中。
import * as React from "react";
import { Button, ButtonProps } from "library/buttons";
interface NewButtonProps extends ButtonProps {
text: string;
url: string;
}
export const NewButton:React.FC<NewButtonProps> = ({ text, url, ...libraryButtonProps }) => (
<div>
<a href={url}>
<Button {...libraryButtonProps} >
{text}
</Button>
</a>
</div>
);
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句