打字稿抱怨使用 React.createClass 时类型“JSX.IntrinsicElements”上不存在属性？

Posted 2023-02-22

【中文标题】打字稿抱怨使用 React.createClass 时类型“JSX.IntrinsicElements”上不存在属性？

【英文标题】：Typescript complains Property does not exist on type 'JSX.IntrinsicElements' when using React.createClass?

【发布时间】：2016-09-21 17:02:38

【问题描述】：

我正在使用 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'.

【问题讨论】：

尝试 将此与帕斯卡大小写一起使用。它区分大小写

@RM-123 不，可以是item。 item 带有小写字母是有效的 html 元素名称。自定义元素都可以是小写元素，就像内在元素一样。

@trusktr 不，它不能是item。自定义元素必须包含-一个连字符。 link

@Qwerty Doh，我知道。我想我的意思是在 DOM 中写入任意元素名称是有效的。你可以写<blahblah>，它会在那里。但是没有办法注册<blahblah> 元素。

@trusktr 不，以小写字母（不带连字符）写入任意元素名称是无效，即使它可能会编译和工作。

【参考方案1】：

您的组件必须以大写字母 I 而不是小写字母 i 开头，否则 TypeScript 会大喊大叫。将 item 更改为 Item 应该可以解决它：

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

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

【讨论】：

为了让未来的面子手清楚，诀窍是Item 中的大写字母I。我们都在这里有同样的判断失误在这里试图骆驼式反应元素。如果你正在阅读这篇文章，你很有可能因为睡眠不足而错过了那个大写字母。

【参考方案2】：

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

【参考方案3】：

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

import * as React from 'react'

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

【参考方案4】：

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

我在声明中有错字：

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

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

错误是这样的：

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

【参考方案5】：

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

解决办法是

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 中的类型定义。

【讨论】：

我同意，当人们在组件上使用重构功能时，vscode 确实会重命名类型定义，例如<button> → <a>

【参考方案6】：

记住："item" 在 TypeScript 中是无效的，你必须声明为 "Item"，大写第一个字母！ 会是这样的：

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

美好的一天！

【参考方案7】：

我用 PascalCase 写组件的名称然后错误消失了