reactjs - Problemer med å lage en komponentinnpakning ved bruk av styled-component og TypeScript

Når jeg lager et komponentbibliotek, ønsket jeg å inkludere layout-komponentene direkte i biblioteket. For det laget jeg bare de klassiske komponentene (Container, Row og Col) som faktisk bare er en kopi av de fra biblioteket react-grid-system.

Så for eksempel ser komponenten min Col slik ut:

import React from 'react'
import styled from 'styled-components'
import { Col as ReactGridSystemCol, ColProps } from 'react-grid-system';

// C O M P O N E N T
const Col: React.FunctionComponent<ColProps> = (props) => {
  const { children } = props

  return (
    <StyledCol {...props}>
      {children}
    </StyledCol>
  )
}

// S T Y L E S
const StyledCol = styled<ColProps>(ReactGridSystemCol)` // <- Type 'ColProps' does not satisfy the constraint '"symbol" | "object" ...
  /* ... */
`

StyledCol.displayName = 'StyledCol'

export default Col

Logisk sett sier jeg at min StyledCol-komponent arver fra ReactGridSystemCol-komponenten, så jeg vil kunne legge til stiler til denne og den vil bli gjengitt i min jsx.

Da må jeg håndtere egenskapene som min Col-komponent kan motta. De er nøyaktig de samme som de til ReactGridSystemCol, så jeg bruker typen fra biblioteket, ColProps.

Jeg indikerer deretter at StyledCol kan motta disse propsene ved å bruke styled<ColProps>(ReactGridSystemCol).

Problemet er at det åpenbart er en typefeil fordi TypeScript gir denne feilen:

Type 'ColProps' does not satisfy the constraint '"symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | ... 157 more ... | FunctionComponent<...>'.
  Type 'ColProps' is not assignable to type 'FunctionComponent<any>'.
    Type 'ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & { width?: string | number | undefined; ... 5 more ...; component?: (() => string) | undefined; } & Partial<...>' provides no match for the signature '(props: any, context?: any): ReactElement<any, any> | null'.

Jeg forstår ikke helt feilen min her, så hvis du har noen ideer, ville jeg vært veldig takknemlig.

Svar #1

Prøv noe sånt som dette.

const StyledCol = styled(ReactGridSystemCol)<ColProps>``

Relaterte artikler