javascript - ტიპის შეცდომა React კომპონენტში, რომელიც შექმნილია forwardRef-ით

მე ვქმნი ელემენტს (კარდის კომპონენტი) forwardRef-ის გამოყენებით, მაგრამ ტიპები არ ემთხვევა, როცა მას ვიყენებ.

აქ არის ბარათის კომპონენტის კოდი

export const Card = React.forwardRef((
  { fluidHeight, className, ...props }:
  { fluidHeight?:boolean, className?:string, props?:any }, ref?:any) => (
  <div
    {...props}
    ref={ref}
    className={clsx(
      "card card-custom gutter-b",
      { "card-height-fluid": fluidHeight },
      className
    )}
  />
));

აქ არის კოდი, რომელიც იყენებს კარტის კომპონენტს

<Card>
    <CardHeader title="List">
        <CardHeaderToolbar>
          <button
            type="button"
            className="btn btn-primary"
            onClick={UIProps.addButtonClick}
          >
            Add New
          </button>
        </CardHeaderToolbar>
      </CardHeader>
      <CardBody>
        <DevicesFilter />
        {UIProps.ids.length > 0 && <Grouping />}
        <DevicesTable />
      </CardBody>
 </Card>

ზემო.snippet-ში Card კომპონენტის გამოყენებისას, კომპილატორი აჩვენებს ტიპის შეცდომას და მისი ანთება აჩვენებს შემდეგ შეცდომას.

ტიპს '{ children: Element[]; }' არ აქვს საერთო თვისებები ტიპთან 'IntrinsicAttributes & { fluidHeight?: boolean; className?: string; props?: any; } & RefAttributes'

ვიცი, რომ ეს არის forwardRef-ის პრობლემა TypeScript-ში, მაგრამ არ ვიცი როგორ გავასწორო.

რედაქტირება

მე ვიპოვე ასეთი ხრიკი

ბარათის კომპონენტი

export const Card = React.forwardRef((
  { children, fluidHeight, className, ...props }:
  {children:JSX.Element[], fluidHeight?:boolean, className?:string, props?:any }, ref?:any) => (
  <div
    {...props}
    ref={ref}
    className={clsx(
      "card card-custom gutter-b",
      { "card-height-fluid": fluidHeight },
      className
    )}
   >
    {/* {children} in case of forwardRef children elements are automatically passed from calling 
    component and should be used like this */}
  </div>
));

მაგრამ ჩემი ვარაუდის მიხედვით, ამ შემთხვევაში როცა მე არ მჭირდება არასდროს ვაწარმოო რომელიმე შვილობილი ელემენტები Card კომპონენტში, მე უნდა გამოვიყენო რამე სხვა forwardRef-ის ნაცვლად, მაგრამ არ ვიცი რა :)

გთხოვთ, დამეხმარეთ! მადლობა

პასუხი #1

ბავშვების ტიპისთვის, თქვენ არ უნდა გამოიყენოთ JSX.Element ან JSX.Element[]. ჩვეულებრივ, კონვენციაა გამოიყენოთ React.ReactNode. ეს ითვალისწინებს ზემოთ აღნიშნულ 2 ტიპს და ყველა სხვა ვალიდურ ტიპს ბავშვებისთვის, როგორიცაა string ან null.

თუმცა, მე ვფიქრობდი Props-ის განსაზღვრების შეცვლას ამ გზით:

type YourProps = { fluidHeight?:boolean, className?:string, props?:any };
type CardProps = React.PropsWithChildren<YourProps>;

export const Card = React.forwardRef((
  { fluidHeight, className, ...props }: CardProps, ref?:any) => (
  <div
    {...props}
    ref={ref}
    className={clsx(
      "card card-custom gutter-b",
      { "card-height-fluid": fluidHeight },
      className
    )}
  />
));

სადაც React.PropsWithChildren<T> არის სასარგებლო ტიპი, რომელიც შეიცავს შვილებს როგორც React.ReactNode ტიპს. აქ არის განსაზღვრა

type PropsWithChildren<P> = P & { children?: ReactNode };