React Subcomponents in Typescript

Question

We have some complex compositions of components, and I'm having trouble making them typesafe. Based on the code below, I'd have expected Typescript to be able to provide types for Menu.Item or Menu.Link, but it doesn't for some reason, they're inferred as "any" (which is refined to JSX.Element<any> when you wrap it in JSX. Any idea why this is happening?

import * as React from 'react';

type RootFunctionComponent<OwnProps, SubComponents> = React.FunctionComponent<OwnProps> & SubComponents;

interface ItemProps {
    text: string;
};

interface LinkProps {
    href: string;
}

const Item: React.FunctionComponent<ItemProps> = props => <div {...props} />;
const Link: React.FunctionComponent<LinkProps> = props => <div {...props} />;

interface MenuSubComponents {
    Item: React.FunctionComponent<;
    Link: typeof Link;
}

const Menu: React.FunctionComponent<{}, MenuSubComponents> & MenuSubComponents = props => <div {...props} />

Menu.Item = Item;
Menu.Link = Link;


const Test: React.FunctionComponent<{}> = () => {
    return <>
        <Menu>
            <Menu.Item text={false} />
            <Menu.Link />
        </Menu>
    </>
}

Result:

How about fixing your example now? :)

Pawel Gorczynski
– Pawel Gorczynski

2020-12-03 08:20:23 +00:00
Commented Dec 3, 2020 at 8:20 — Pawel Gorczynski
– Pawel Gorczynski, Commented Dec 3, 2020 at 8:20

Rich Flavell · Accepted Answer · 2019-07-09 13:21:05Z

10

The issue was with the menu type definitions:

React.FC<{}, MenuSubComponents>

Correct usage is:

React.FC<MenuSubComponents>

You can see this in action here: https://codesandbox.io/s/condescending-lamarr-xjkcw

answered Jul 9, 2019 at 13:21

Rich Flavell

4363 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dreadwail Over a year ago

This doesn't constrain the children of Menu to be what you specified for the sub-components though. You can still specify any kind of react child for Menu.

Bivas Biswas · Accepted Answer · 2022-10-11 12:27:41Z

3

Here is Full Example of A Higher Order Component Table with props

import React from 'react'
import { tw } from 'twind'

import Body from './Body'
import Cell from './Cell'
import Head from './Head'
import Row from './Row'

export type CommonPropsType = {
  className?: string
  children: React.ReactNode
}

type TableSubComponents = {
  Row: typeof Row
  Cell: typeof Cell
  Head: typeof Head
  Body: typeof Body
}

type TablePropsType = CommonPropsType & { wrapperClassName?: string }

const Table: React.FunctionComponent<TablePropsType> & TableSubComponents = (
  props: TablePropsType
) => {
  const { className, children, wrapperClassName } = props
  return (
    <div className={tw('overflow-x-auto pb-2', wrapperClassName)}>
      <table
        className={tw('min-w-full leading-normal', className)}
        cellPadding="8">
        {children}
      </table>
    </div>
  )
}

Table.Row = Row
Table.Cell = Cell
Table.Head = Head
Table.Body = Body

export default Table

answered Oct 11, 2022 at 12:27

Bivas Biswas

1141 silver badge3 bronze badges

1 Comment

Mark Graham Over a year ago

I don't suppose you know the TypeScript to get this working when using React.forwardRef with the component? Can't for the life of my figure out what this might be, and consequently, I've had to disable the sub-components.

Collectives™ on Stack Overflow

React Subcomponents in Typescript

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related