programing

타입 'JSX'에 속성이 존재하지 않는다고 타이프 스크립트가 불만을 제기합니다.React.createClass를 사용할 때 'Intelligent Elements'를 선택하십시오.

i4 2023. 3. 27. 20:59
반응형

타입 'JSX'에 속성이 존재하지 않는다고 타이프 스크립트가 불만을 제기합니다.React.createClass를 사용할 때 'Intelligent Elements'를 선택하십시오.

저는 레독스 어플리케이션을 작성하기 위해 타이프 스크립트를 사용하고 있습니다.

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'.

구성 요소는 대문자로 시작해야 합니다.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 />)
    }
}

다음과 같이 사용자 지정 요소 유형을 선언할 수 있습니다.

import * as React from 'react'

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

그것은 당신의item컴포넌트 이름이 대문자로 시작되지 않아 Typescript가 불만을 제기합니다.교환item와 함께Item이 문제를 해결할 수 있습니다.

이 일에 매달린 다른 사람을 위해.

해결책은

rm -rf node_modules
npm install

타이프 스크립트가 불만족

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

그리고.

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

근본 원인은 실수로 node_modules에서 유형 정의를 편집한 vscode(me)였다고 생각합니다.

내가 이 질문에서와 같은 문제를 가지고 있는 것처럼 보였지만, 그것은 오타였다:/ 그러나 나는 오류와 매우 비슷해 보였고 구글이 나를 여기로 이끌었기 때문에 나는 여기에서 그것을 공유하기로 결정했다.

신고서에 오타가 있었습니다.

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

IntrinicElements 대신 IntrinisicElements(Intrin 뒤에 i자를 추가)를 사용했습니다.컴파일러는 그것이 인터페이스의 정의이기 때문에 우리가 원하는 이름으로 할 수 있다고 불평하지 않았습니다.

오류는 다음과 같습니다.

'About-me' 속성이 'JSX' 유형에 없습니다.「Intelligent Elements(본질 요소)」.

주의: "항목"은 TypeScript에서 사용할 수 없습니다. "항목"으로 선언해야 합니다. 대문자는 첫 번째 문자입니다.다음과 같습니다.

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

안녕하세요!

이 문제는 를 눌러 태그 이름을 바꾼 경우에 발생할 수 있습니다.F2태그의 타이핑이 변경될 수 있습니다.

이름이 바뀌었을 때index.d.ts파일이 새 탭에서 열려 있어야 합니다.탭이 아직 열려 있는지 확인합니다.그 경로는 아마.../node_modules/@types/react/index.d.ts.

탭을 찾으면 탭으로 이동한 다음 ctrl-z(cmd-z)를 눌러 변경을 취소합니다.

탭이 표시되지 않으면 닫았을 수 있습니다.단축키를 사용하여 최근에 닫은 탭을 다시 열어 보십시오.단축키를 모르는 경우 명령 팔레트를 사용합니다.View: Reopen Closed Editor. 파일을 찾을 때까지 이 작업을 계속한 다음 변경 내용을 취소합니다.(VScode는 탭을 닫은 후에도 실행 취소에 대한 변경 내역을 기억합니다.)

Pascal Case를 사용하여 컴포넌트 이름을 작성하면 오류가 사라집니다.

하면 됩니다.
추가:
전::export default function jobAndIncome() {};
그후:export default function JobAndIncome() {};

언급URL : https://stackoverflow.com/questions/37414304/typescript-complains-property-does-not-exist-on-type-jsx-intrinsicelements-whe

반응형