我有一个像这样的界面。这代表了“基地按钮”。
export interface ButtonProps {
backgroundColor?: Colors,
children?: React.ReactNode | JSX.Element,
style?: CSSProperties,
disabled?: boolean,
onClick?: () => void,
}
现在我想在此基础上创建一个“文本按钮”,一个包含文本的按钮。
interface TextButtonProps {
buttonProps?: ButtonProps,
textColor?: Colors,
}
我知道要从ButtonProps
中提取属性backgroundColor
,并在<TextButton />
中使用它
const TextButton = ({
backgroundColor,
textColor = 'black',
textProps,
...buttonProps,
}: TextButtonProps) => {
return (
...
)
有没有一种方法可以使backgroundColor
对<TextButton />
可用,而不用在TextButtonProps
中再次显式地命名它?
interface TextButtonProps {
backgroundColor?: Colors,
buttonProps?: ButtonProps,
textColor?: Colors,
}
但是我要重复一下,因为ButtonProps
已经包含了backgroundColor
。
3条答案
按热度按时间bd1hkmkf1#
可以保持类型不变,并将属性传递给
Button
:例如,如果你需要在
<TextButton>
中使用ButtonProps.backgroundColor
,那么你需要编写类似<Text foreground={textColor} background={buttonProps?.backgroundColor}>
的代码。我个人觉得TextButtonProps.buttonProps
有点令人困惑:想想打电话的人:真的很困惑。
注意:您可以从类型中拾取属性:
但这不是我在这里要做的,我只是用附加属性扩展
ButtonProps
接口:您的组件将是:
额外说明:如果你使用
React.FC
,你就不需要声明children
(我强烈建议你总是声明children
)。注意React 18的类型会有一些变化,所以你可能需要使用React.FC<React.PropsWithChildren<ButtonProps>>
。请记住,type T = { ... } & V
与interface T extends V { ... }
并不相同(即使在大多数情况下,您可能并不关心两者之间的差异)。mqkwyuun2#
如果要声明具有其他属性的类型,可以使用交集:
6qftjkof3#
尝试以下操作,但不创建额外的类型定义:
**文本按钮属性和文本按钮属性[文本按钮属性的键]**作为类型,它也应该采用嵌套类型