redux 在使用React.createClass时,Typescript抱怨类型'JSX.IntrinsicElements'上不存在属性?

jckbn6z7  于 2022-11-12  发布在  React
关注(0)|答案(9)|浏览(703)

我正在使用打字脚本编写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'.
vc6uscn9

vc6uscn91#

您的元件必须以大写字母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 />)
    }
}
r7knjye2

r7knjye22#

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

import * as React from 'react'

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

envsm3lx3#

这是因为您的item组件的名称不是以大写字母开头,从而导致Typescript出现问题。将item替换为Item可以解决此问题。

cnwbcb6i

cnwbcb6i4#

对其他被困在这里的人来说。
解决方案是

rm -rf node_modules
npm install

打字稿被投诉

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

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

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

3b6akqbq

3b6akqbq5#

它看起来像我有同样的问题,因为在这个问题,但它是错字:/但我决定在这里分享,因为错误看起来非常相似,谷歌引导我在这里.
我在声明中有排印错误:

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

而不是IntrinisicElements我有 IntrinisicElements(额外的'i'字母后'Intrin').编译器没有抱怨,因为它是接口的定义,所以名称可以由我们选择.
错误是这样的:
类型“JSX. IntrinsicElements”上不存在属性“about-me”。

kx7yvsdv

kx7yvsdv6#

记住:“item”在TypeScript中是无效的,你必须声明为“Item”,第一个字母大写!它将是这样的:

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

你好!

uplii1fm

uplii1fm7#

如果您在VSCode中按F2重新命名标记,可能会发生这种情况,这可能会变更标记的型别。
当重命名发生时,某些index.d.ts文件应该在新标签页中打开。请检查该标签页是否仍处于打开状态。路径可能类似于.../node_modules/@types/react/index.d.ts
如果找到该选项卡,请进入该选项卡,然后按ctrl-z(cmd-z)撤消更改。
如果看不到该选项卡,则可能已将其关闭。请尝试使用热键重新打开最近关闭的选项卡。如果不知道热键,请使用命令调色板View: Reopen Closed Editor。继续执行此操作,直到找到该文件,然后撤消所做的更改。(VSCode会记住撤消的更改历史记录,即使在关闭选项卡之后也是如此)

rmbxnbpk

rmbxnbpk8#

我在编写组件名称时使用了PascalCase,然后错误消失

6jjcrrmo

6jjcrrmo9#

您只需编辑名称部分以大写,
例如:
之前:export default function jobAndIncome() {};
之后:export default function JobAndIncome() {};

相关问题