유형 스크립트에서 'JSX' 유형에 속성이 없다고 불만을 제기합니다.React.createClass를 사용할 때 '내재 요소'?

유형 스크립트에서 'JSX' 유형에 속성이 없다고 불만을 제기합니다.React.createClass를 사용할 때 '내재 요소'?

나는 레듀스 애플리케이션을 쓰기 위해 타자기를 사용하고 있다.

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

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

그러면 typescript가 다음과 같이 불만을 제기합니다:

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

---

구성 요소는 작은 문자 대신 대문자로 시작해야 합니다. 그렇지 않으면 TypeScript가 울립니다. 로 변경하면 문제가 해결됩니다:

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>;
    }
  }
}

---

구성 요소의 이름이 대문자로 시작하지 않기 때문에 유형 스크립트에 불만이 제기됩니다. 로 대체하면 이 문제를 해결할 수 있습니다.

---

이 질문과 같은 문제가 있는 것 같았지만 오타였어요:/ 하지만 오류가 매우 유사해 보이고 구글이 저를 여기로 이끌었기 때문에 여기에 공유하기로 결정했습니다.

나는 선언문에 오타가 있었다:

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

나 대신에 ('Intrin' 뒤에 'i'자 추가). 컴파일러는 그것이 인터페이스의 정의이기 때문에 불평하지 않았고, 그래서 그 이름은 우리가 선택할 수 있다.

그리고 그 오류는 다음과 같았다:

'about-me' 속성이 'JSX' 유형에 없습니다.'본질 요소'입니다.

---

이 일에 집착하는 다른 사람들을 위해서.

해결책은 다음과 같았다

rm -rf node_modules
npm install

유형 스크립트가 불만을 제기했습니다

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

그리고.

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

근본 원인은 vcode(나)가 실수로 node_modules의 유형 정의를 편집한 것이라고 생각합니다.

---

파스칼 케이스를 사용하여 구성 요소 이름을 작성하면 오류가 사라집니다

---

"항목"은 TypeScript에서 유효하지 않습니다. "항목", 대문자로 선언해야 합니다! 다음과 같습니다:

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

안녕하세요!

---

VSCode에서 태그를 눌러 이름을 바꾼 경우 태그의 입력이 변경될 수 있습니다.

이름이 바뀌었을 때 일부 파일이 새 탭에서 열렸어야 합니다. 탭이 아직 열려 있는지 확인합니다. 경로는 다음과 같을 수 있습니다.

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

탭이 표시되지 않으면 탭을 닫았을 수 있습니다. 단축키를 사용하여 최근에 닫은 탭을 다시 여십시오. 바로 가기 키를 모르면 명령 팔레트를 사용하십시오. 파일을 찾을 때까지 계속한 다음 변경 내용을 실행 취소하십시오. (V 코드는 탭을 닫은 후에도 실행 취소에 대한 변경 기록을 기억합니다.)

---

대문자로 표시할 이름 구성 요소를 편집하기만 하면 됩니다. 예를 들어, 다음과 같은 경우:

---

당신의 문제는 특히 항목의 첫 글자가 작은 것과 관련이 있습니다.

문제:

그러나 CRA 대신 Vite를 사용하여 React 프로젝트를 생성하여 이 문제에 직면한 사람들을 위해, Vite가 react-ts 템플릿과 events.config.json 파일에 오류를 던지는 문제가 있음을 알려드리겠습니다

솔루션:

따라서 반응 템플릿을 가지고 싶다면 Vite 대신 CRA를 사용하십시오. 그렇지 않으면 간단한 반응 앱 생성을 위해 Vite가 가장 좋습니다.

감사해요.