JSX element type 'CounterDisplay' is not a constructor function for JSX elements. Types of property 'refs' are incompatible

问题

I updated to typescript to version 2.1.6 from version 1.6 and the typings for react to version 15.0.15. If I compile the typescript files via gulp or tsc everything is working fine and there are no error messages. However Visual Studio 2017 RC as well as Sublime Text complain about the typescript code.

Here is some of my code. This does not produce any errors.

interface CounterDisplayProps {
    loading: boolean;
    first: number;
    last: number;
    total: number;
}

class CounterDisplay extends React.Component<CounterDisplayProps, {}> {
    render() {
        var { props } = this;
        return (
            <div className="Counter">
                Showing {props.first} to {props.total ? Math.min(props.last, props.total) : props.last} of {props.loading ? "?" : props.total} entries
            </div>
    )}
}

The render function of another component contains:

<CounterDisplay 
    loading={props.counterIsLoading}
    first={props.skip + 1}
    last={props.skip + props.take}
    total={props.counter} />

The code above is producing the error that follwows in both Visual Studio 2017 as well as Sublime Text:

JSX element type 'CounterDisplay' is not a constructor function for JSX elements.
Types of property 'refs' are incompatible.
Type '{ [key: string]: ReactInstance; }' is not assignable to type '{
[key: string]: Component<any, any>; }'.
Index signatures are incompatible.
Type 'ReactInstance' is not assignable to type 'Component<any, any>'.
Type 'React.Component<any, any>' is not assignable to type 'React.Component<any, any>'. Two different types with this name exist, but they are unrelated.
Types of property 'refs' are incompatible.
Type '{ [key: string]: ReactInstance; }' is not assignable to type '{
[key: string]: Component<any, any>; }'.
Index signatures are incompatible.
Type 'ReactInstance' is not assignable to type 'Component<any, any>'.
Type 'React.Component<any, any>' is not assignable to type 'React.Component<any, any>'. Two different types with this name exist, but they are unrelated.

Visual Studio and Sublime Text are complaining whenever I use a react component, that I wrote myself. I'm wondering why this code working when using the compiler but not when using the IDE. Can you help me?

回答1:

Thanks to Ryan for his help. The old type definitions for react still existed as a file in the folder structure of my project. They were not referenced, though. As soon as I removed the files Visual Studio didn't show any errors anymore.

来源：https://stackoverflow.com/questions/42720532/jsx-element-type-counterdisplay-is-not-a-constructor-function-for-jsx-elements

标签

visual-studio

reactjs

typescript

react-jsx