Question

有时候我有一个样式化的组件，例如：

import styled from 'styled-components';

const StyledButton = styled.button;

然后我需要像这样使用它

export default function CloseButton() {
  return <StyledButton>Close</StyledButton>
}

并像<CloseButton />一样使用它。但是，如果我需要像<CloseButton onClick={doSomething} />这样使用它怎么办？我必须将CloseButton组件更改为：

type Props = {
  onClick: () => void; 
}
export default function CloseButton(props: Props) {
  return <StyledButton onClick={props.onClick}>Close</StyledButton>
}

这太糟了。因此，更好的方法就是传递所有道具，例如：

export default function CloseButton(props: any) {
  return <StyledButton {...props}>Close</StyledButton>
}

那很干净简单……但是如何避免使用any类型的props并告诉打字稿使用来自StyledButton的道具？

Answer 1

使用Typescript，您可以通过其键访问类型字段类型，如下所示：

type MyObject = {
  value: number;
}

// same as : number
const v: MyObject['value'] = 6;

您的情况是您想要的：

export default function CloseButton(props: StyledButton['props']) {
  return <StyledButton {...props}>Close</StyledButton>
}

当您要保持一个类型的作用域但允许从另一个类型使用它时，这是非常有用的。

Answer 2

看来这是

export default function CloseButton(props: typeof StyledButton.defaultProps) {
  return <StyledButton {...props}>Close</StyledButton>
}

几乎可以正常工作。尽管没有显示as和forwardAs

之类的StyledComponents道具，但它确实显示了<button>元素的HTML属性。

如何使用样式化组件中的道具类型？

2 个答案: