TypeScript：为样式化组件元素扩展 React 组件道具

Question

我正在尝试在 TypeScript 中扩展反应组件道具，以便它包含所有普通html按钮attributes，以及反应特定的东西，如ref

我的理解是类型React.HTMLProps是我需要的，（React.HTMLAttributes不包含ref）

但是，当尝试将我的道具传递给styled组件时，编译器会抱怨。

我的尝试 Codesandbox 示例：https ://codesandbox.io/s/cocky-cohen-27cpw

Answer 1

几件事。

将输入更改为：

interface Props extends React.ComponentPropsWithoutRef<'button'> {
  loading?: boolean
  secondary?: boolean
  fullWidth?: boolean
}

那应该可以为您解决问题。我分叉了你的沙箱，它消除了错误。

还有一个来自您可以使用的 SO 帖子：在 TypeScript 中使用带有子项的 forwardRef 组件- 答案详细说明了一种方式，但也提到了答案 1。

Answer 2

感谢所有帮助我深入了解此事的人。我真正需要的是能够将引用转发到我的底层样式组件，我在 TypeScript 中实现了这一点，如下所示：