使用React.createClass时,类型'抱怨'在'JSX.IntrinsicElements'类型中不存在？

Question

我正在使用typescript来编写redux应用程序.

var item = React.createClass({
  render: function() {
    return (<div>hello world</div>)
  }
});

export default class ItemList extends Component<any, any> {
    render() {
        return (<item />)
    }
}

然后打字稿抱怨这个:

Property 'item' does not exist on type 'JSX.IntrinsicElements'.

Answer 1

对于其他坚持这一点的人。

解决方案是

rm -rf node_modules
npm install

打字稿抱怨

Property 'div' does not exist on type 'StyledInterface'.

和

Property 'div' does not exist on type 'JSX.IntrinsicElements'.

我认为根本原因是 vscode （我）不小心编辑了 node_modules 中的类型定义。

Answer 2

您可以像这样声明您的自定义元素类型：

import * as React from 'react'

declare global {
  namespace JSX {
    interface IntrinsicElements {
      item: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
    }
  }
}

Answer 3

那是因为你的item组件名称不是以大写字母开头，导致 Typescript 报错。替换item为Item可以解决这个问题。

Answer 4

var Item = React.createClass({
  render: function() {
    return (<div>hello world</div>)
  }
});

export default class ItemList extends Component<any, any> {
    render() {
        return (<Item />)
    }
}

Answer 5

对于所有遇到类似错误的人：

Property 'div' does not exist on type 'JSX.IntrinsicElements'.

或者任何其他标签来代替 div。如果其他解决方案没有帮助，请尝试添加到tsconfig.json：

...    
"compilerOptions": {
    "moduleResolution": "node"
    }
...

Answer 6

请记住：“item”在 TypeScript 中无效，您必须声明为“Item”，首字母大写！它会像：

var Item = React.createClass({
  render: function() {
    return (<div>hello world</div>)
  }
});

再会！

Answer 7

对于遇到此问题并且之前的答案不起作用的其他人，.tsx由于tsconfig.json文件配置错误，这种情况也可能发生在文件中。

我遇到了以下错误：

...
"compilerOptions": {
   "jsx": "react-jsx"
}
...

并通过将其更改为解决了它：

...
"compilerOptions": {
   "jsx": "react"
}
...

div同样，上面的答案可能是首先要检查的事情，但如果您在标准 HTML 元素（如、等）上遇到这些错误，span并且您正在使用 Typescript。检查你的 tsconfig.json！

Answer 8

看起来我在这个问题中遇到了同样的问题，但它是错字：/但我决定在这里分享，因为错误看起来非常相似，谷歌把我带到了这里。

我在声明中有错字：

declare global {
    namespace JSX {
        interface IntrinisicElements {
            'about-me': { me: string }
        }
    }
}

而不是IntrinsicElements我有IntrinisicElements（'Intrin' 后面的额外的 'i' 字母）。编译器没有抱怨，因为它是接口的定义，所以名称可以由我们选择。

错误是这样的：

类型“JSX.IntrinsicElements”上不存在属性“about-me”。