reactjs - VSCode TS-feil med React.forwardRef funksjonell komponent

Vi bruker JavaScript (ikke TypeScript) for å skrive komponentbiblioteket vårt, og vi har checkJs: true i prosjektets jsconfig.json-fil.

Alle våre komponenter er funksjonelle komponenter (ingen klassekomponenter). Når en komponent krever en ref, bruker vi React.forwardRef.

Et eksempel på en komponent for hensikten med dette spørsmålet; ikke en faktisk komponent, men viser hvordan vi skriver våre komponenter:

import React from 'react';
import { View } from 'react-native';
import propTypes from './propTypes';

export const Box = React.forwardRef(({ padding, children }, ref) => {
  return (
    <View ref={ref} style={{ padding }}>
      {children}
    </View>
  );
});

Box.propTypes = propTypes;

Dette forårsaker imidlertid denne "røde krøllstreken"-feilen under padding-egenskapen:

Egenskapen 'padding' eksisterer ikke på typen '{ children?: ReactNode; }'.ts(2339)

Og hvor propTypes er tildelt:

Type '{ padding: Requireable; }' har ingen egenskaper til felles med typen 'WeakValidationMap<RefAttributes>'.ts(2559)

Og når du implementerer denne <Box>-komponenten, vises den røde bølgete linjen under komponentens navn, og feilen er:

Type '{ children: Element; }' har ingen felles egenskaper med typen 'IntrinsicAttributes & RefAttributes'.ts(2559)

Koden i seg selv er gyldig, og å endre checkJs til false løser dette, men vi vil beholde checkJs true.

Hva gjør vi egentlig galt?

Svar #1

Lag først din 'indre' Box-komponent med ref spesifisert som det andre argumentet, men ikke pakk den inn i forwardRef. Definer dens propTypes, og tildel deretter Box for eksport, pakket inn i forwardRef. Dette lar deg tilordne PropTypes, videresende ref og ikke få kjeft av kompilatoren.

import React from 'react';
import { View } from 'react-native';
import propTypes from './propTypes';

const BoxComponent = ({ padding, children }, ref) => {
  return (
    <View ref={ref} style={{ padding }}>
      {children}
    </View>
  );
}
Box.propTypes = propTypes;

export const Box = React.forwardRef(BoxComponent)

Svar #2

Jeg er ikke sikker på hva du gjør med propTypes, men du kan definere både props og ref-typen ved å sette generiske typer på forwardRef:

export const Box = React.forwardRef<View, {padding?: string | number}>(({ padding, children }, ref) => {
  return (
    <View ref={ref} style={{ padding }}>
      {children}
    </View>
  );
});

Lekeromlenke

Relaterte artikler