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

Question

我正在尝试在TypeScript中扩展react组件prop，以使其包含所有正常的html按钮attributes，以及对诸如ref的特定内容

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

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

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

Answer 1

感谢所有帮助我深入浅出的人。我真正需要的是能够将ref转发到我的基础样式组件，我在TypeScript中实现了这样的目标：

Answer 2

事物的结合。

将键入更改为：

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

那应该为您解决问题。我分叉了您的沙箱，它摆脱了错误。

还有一条SO帖子，您可以使用它：Using a forwardRef component with children in TypeScript-答案详细说明了一种方式，但也提到了答案1。

Answer 3

您使用了错误的属性，SButton无法访问引用。

import React, { ButtonHTMLAttributes, DetailedHTMLProps } from "react";
import { render } from "react-dom";
import styled, { css } from "styled-components";

interface Props extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
  loading?: boolean;
  secondary?: boolean;
  fullWidth?: boolean;
}

export const Button: React.FC<Props> = p => {
  const { ref, ...buttonProps } = p;
  return <SButton {...buttonProps}>{p.children}</SButton>;
};

export const SButton = styled.button<Props>(
  p => css`
    /*  */
  `
);

render(<Button>Hello world</Button>, document.getElementById("root"));

这会为您的道具使用正确的ButtonHTMLAttributes。 SButton不接受ref，这就是为什么它用const { ref, ...buttonProps } = p;从按钮属性中提取出来的原因。这将留下buttonProps将保留p中除ref以外的所有内容。 希望这会有所帮助。