How can I accept a React.Component parameter in a function with typescript?

Question

When I use React with TypeScript, I usually create a ES6 class to define a component like so:

import * as React from 'react';

interface TextProps { text: string; }

export class Panel extends React.Component<TextProps, any> {
    constructor(props: TextProps) {
        super(props);
    }
    render() {
        return <div className="panel">{this.props.text}</div>;
    }
}

export class Label extends React.Component<TextProps, any> {
    constructor(props: TextProps) {
        super(props);
    }
    render() {
        return <span className="label">{this.props.text}</span>;
    }
}

What I would like to do is create a type that would accept both a Panel or a Label.

I tried the following:

type TextComp = React.Component<TextProps, any>;

function create(component: TextComp, text: string) {
    return React.createElement(component, { text: text });
}

This shows compiler errors on the React.createElement(component, parameter but the code runs properly.

How can I define the type TextComp such that this code compiles without errors using TypeScript version 2.2.1?

Community · Accepted Answer · 2017-05-23 11:54:07Z

6

What you want is this:

type TextComp = new(...args: any[]) => React.Component<TextProps, any>;

function create(component: TextComp, text: string) {
    return React.createElement(component, { text: text });
}

The root cause is the same as explained at What does the error "JSX element type '...' does not have any construct or call signatures" mean?

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered Mar 17, 2017 at 1:49

Ryan Cavanaugh

223k59 gold badges280 silver badges235 bronze badges

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

1 Comment

styfle Over a year ago

Very cool! Can you take it one step further and also accept React Stateless components...simply a function like type type Stateless = (props: TextProps) => JSX.Element;? When I tried to union your TextComp type with my Stateless type, React.createElement was complaining at me again :/

Collectives™ on Stack Overflow

How can I accept a React.Component parameter in a function with typescript?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related