JSX元素类型'CounterDisplay'不是JSX元素的构造函数.属性“引用"的类型不兼容 [英] JSX element type 'CounterDisplay' is not a constructor function for JSX elements. Types of property 'refs' are incompatible

问题描述

我将打字稿从1.6版更新到了2.1.6版，键入内容则响应了15.0.15版.如果我通过gulp或tsc编译打字稿文件，则一切工作正常，并且没有错误消息.但是，Visual Studio 2017 RC和Sublime Text抱怨打字稿代码.

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

上面的代码在Visual Studio 2017和Sublime Text中都产生了以下错误:

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.

每当我使用自己编写的react组件时，Visual Studio和Sublime Text就会抱怨.我想知道为什么此代码在使用编译器时有效，而在使用IDE时却无效.你能帮我吗?

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?

推荐答案

感谢Ryan的帮助. react的旧类型定义仍然作为文件存在于我项目的文件夹结构中.但是，未引用它们.我删除文件后，Visual Studio不再显示任何错误.

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.

这篇关于JSX元素类型'CounterDisplay'不是JSX元素的构造函数.属性“引用"的类型不兼容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！