Typescript React.ComponentProps 没有得到道具

Question

在props中找不到boxProp 。

库版本：

├─ react@16.13.1

└─ styled-components@5.2.1

编辑： https://codesandbox.io/s/jovial-germain-qunlz

Answer 1

这不起作用，因为您实际上并没有将任何道具传递给您的Box组件，第一行所做的只是注释您的Box组件可以使用哪些道具 - 因此 React 在使用ComponentProps方法时没有要提取哪些道具的上下文.

当您自己注释道具类型时，一个简单的解决方法是执行以下操作：

type BoxProps = { boxProp: boolean }

const Box = styled('div')<BoxProps>

const MyBox: React.FC<BoxProps> = ({ boxProp }) => {
  return (
    <Box boxProp={boxProp} />
  )
}

让我知道这是否有帮助！

Answer 2

这是我最后一次尝试解决这个问题：

type OwnProps = { boxProps?: boolean };

const Box = styled.div<OwnProps>``;

type CustomBoxProps = StyledComponentProps<'div', DefaultTheme, OwnProps, never>;

export const MyBox: React.FC<CustomBoxProps> = (props) => {
  return (<Box {...props} />);
};

不幸的是，必须使用StyledComponentProps 。 React.ComponentProps不适用于 styled-components 接口。 肯定是他们那边出了问题。

请让我知道这是否可以解决您的问题，它应该