在使用 forwardRef 创建的 React 组件上输入错误

Question

I'm creating an element(Card component) using forwardRef but types mismatch when using it.

Here is the code of Card component

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
    )}
  />
));

Here is the code using Card component

<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>

In the above snippet using Card component, compiler show type error on and hoving over it show following error.

Type '{ children: Element[]; }' has no properties in common with type 'IntrinsicAttributes & { fluidHeight?: boolean; className?: string; props?: any; } & RefAttributes'

I know it's a problem of forwardRef in typescript but don't know how to fix it.

Edit

I found a hack like this

Card component

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>
));

But as per my assumption in this case when I don't need to pass any children elements for rendering inside Card component, I should use something else than forwardRef but don't know what :)

Please Help! Thanks

Answer 1

For children type, you shouldn't use JSX.Element or JSX.Element[] . Usually the convention is to use React.ReactNode . It includes the 2 above types and all other valid types for children like string or null .

So I'd change the props definition to:

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
    )}
  />
));

where React.PropsWithChildren<T> is a utility type that includes children as React.ReactNode type. Here is the definition

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