当使用 React.createClass 时，类型“ JSX.intrinsicElements”上的 Property 不存在？

我用打印稿来写还原应用程序。

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'.
177301 次浏览
小开
最佳答案

Your component must start with a capital letter I instead of small letter i otherwise TypeScript would yell. Changing item to Item should fix it:

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


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

You can declare your custom element type like this:

import * as React from 'react'


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

That is because your item component's name does not start with a capital letter, causing Typescript to complain. Replacing item with Item could solve this problem.

小开

It looked like I had the same problem as in this question, but it was typo :/ But I've decided to share that here since error looked very similar and google led me here.

I had typo in declaration:

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

Instead of IntrinsicElements I had IntrinisicElements (extra 'i' letter after 'Intrin'). The compiler didn't complain that because it is definition of interface, so the name can be of our choice.

And the error was like that:

Property 'about-me' does not exist on type 'JSX.IntrinsicElements'.

小开

For anyone else stuck on this.

The solutions was to

rm -rf node_modules
npm install

Typescript complained

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

and

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

I think the root cause was vscode (me) accidentally editing type definitions in node_modules .

小开

I used PascalCase in writing the name of component then the error disappear

小开

Remember: "item" is not valid in TypeScript, you must declare as "Item", UpperCase the first letter! It is will be like:

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

Good day!

小开

This could happen if you just renamed a tag by pressing F2 on it in VSCode, which could change the typing of the tag.

When the rename happened, some index.d.ts file should have opened in a new tab. Check if the tab is still open. The path might be something like .../node_modules/@types/react/index.d.ts.

If you find the tab, go into it, then press ctrl-z (cmd-z) to undo your change.

If you don't see the tab, you probably have closed it. Try to use your hotkey to reopen recently closed tabs. If you don't know the hotkey, use command palette View: Reopen Closed Editor. Keep doing it until you find the file, then undo your change. (VSCode remembers the change history for undo, even after you close the tab)

小开

you just edit the name component to capitalize,
for ex:
before: export default function jobAndIncome() {};
after: export default function JobAndIncome() {};


提交答案