在反应组件上出现 'is not assignable to type' 错误，我怎样才能更好地理解它？

Question

我正在构建这个组件来测试 react-spring 库。我在 codesandbox 上启动它，然后将它拉到本地到我的电脑上。当我把它拉下来时，出现了这个错误，我不确定如何解释它或导致它的原因。我对打字稿很陌生，所以非常感谢任何帮助。

一开始以为是children prop的类型不对，后来发现其实是width和height，现在不知道是不是styled-components（因为错误出现在 StyledCard 下）或者如果当你使用子渲染 prop 方法时你必须以不同的方式指定你的类型..

import * as React from "react"
import styled from "styled-components"

const StyledCard = styled.div`
  width: ${(props: any) => props.width}px;
  height: ${(props: any) => props.height}px;
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  text-align: center;
`

interface ICardProps {
  children?: React.ReactNode
  width?: number
  height?: number
}

const Card: React.FC<ICardProps> = ({ width, height, children }) => {
  return (
    <StyledCard width={width} height={height}>
      {children}
    </StyledCard>
  )
}

export default Card

这是我得到的错误：

Type '{ children: ReactNode; width: number | undefined; height: number | undefined; }' is not assignable to type 'IntrinsicAttributes & Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "title" | "key" | "defaultChecked" | "defaultValue" | ... 246 more ... | "onTransitionEndCapture"> & { ...; }, "style" | ... 251 more ... | "onTransitionEndCapture"> & Partial<...>, "style" | ... 251 mor...'.
  Property 'width' does not exist on type 'IntrinsicAttributes & Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "title" | "key" | "defaultChecked" | "defaultValue" | ... 246 more ... | "onTransitionEndCapture"> & { ...; }, "style" | ... 251 more ... | "onTransitionEndCapture"> & Partial<...>, "style" | ... 251 mor...'.ts(2322)

Answer 1

为了让 Typescript 知道您要将哪些自定义道具传递给您的样式 div，您需要使用这样的类型参数让它知道：

interface StyledCardProps {
    width?: number
    height?: number
}

const StyledCard = styled.div<StyledCardProps>`
    // your css here
`

在反应组件上出现 'is not assignable to type' 错误，我怎样才能更好地理解它？

Getting 'is not assignable to type' error on react component, how can I understand it better?

typescript

reactjs

tsx

styled-components

react-props