Generic React components in TypeScript/JSX?

Question

I would like to create pluggable React components. Components are resolved by their class names, so I am naturally drawn to generics; but this doesn\'t seem to work.

<         


        

Answer 1

The accepted answer for this question still stands, due to TypeScript types being erased, however as of Typescript 2.9, generic JSX components are supported

The example provided is:

class GenericComponent<P> extends React.Component<P> {
    internalProp: P;
}
type Props = { a: number; b: string; };

const x = <GenericComponent<Props> a={10} b="hi"/>; // OK
const y = <GenericComponent<Props> a={10} b={20} />; // Error

Just thought it worth mentioning for anyone who ends up here via the question title.

Answer 2

This isn't possible to do using generics, though it's not clear why you would want to use generics for this problem rather than just providing the inner element using the normal props mechanism.

The reason is that types are erased, so you need to provide the class constructor to the class so that it has a reference to the value to instantiate in C. But there's no place other than the JSX props (or state or whatever you need to do) for you to pass in that value.

In other words, instead of writing

// not sure what you would expect the syntax to be?
const elem = <Div<Foo> ... />; 

You should write

const elem = <Div myChild={Foo} />

and consume it in your render as

const Child = this.props.myChild;
return <div><Child /></div>;

As an aside, the correct constraint is new() => React.Component rather than React.Component -- remember that the things you write in the JSX (<Div>, etc) are the constructors for classes, not the class instances.