[reactjs] “JSX 요소 유형 ‘…’에 구성 또는 호출 서명이 없습니다. ‘오류는 무엇을 의미합니까?

Program / 글쓴이

나는 약간의 코드를 썼다 :

function renderGreeting(Elem: React.Component<any, any>) {
    return <span>Hello, <Elem />!</span>;
}

오류가 발생했습니다 :

JSX 요소 유형에 Elem구성 또는 호출 서명이 없습니다.

무슨 뜻인가요?

답변

이것은 생성자 와 인스턴스 사이의 혼동 입니다.

React에서 컴포넌트를 작성할 때 다음을 기억하십시오.

class Greeter extends React.Component<any, any> {
    render() {
        return <div>Hello, {this.props.whoToGreet}</div>;
    }
}

이 방법으로 사용하십시오.

return <Greeter whoToGreet='world' />;

당신은 하지 않는 것이이 방법을 사용합니다 :

let Greet = new Greeter();
return <Greet whoToGreet='world' />;

첫 번째 예에서는 컴포넌트 Greeter의 생성자 함수 인 을 전달 합니다. 올바른 사용법입니다. 두 번째 예에서는의 인스턴스 를 전달 합니다Greeter . 올바르지 않으며 런타임시 “개체가 함수가 아닙니다”와 같은 오류로 실패합니다.

이 코드의 문제

function renderGreeting(Elem: React.Component<any, any>) {
    return <span>Hello, <Elem />!</span>;
}

의 인스턴스 를 기대하고 있다는 것 입니다 React.Component. 생성자 를 취하는 함수 React.Component:

function renderGreeting(Elem: new() => React.Component<any, any>) {
    return <span>Hello, <Elem />!</span>;
}

또는 유사하게 :

function renderGreeting(Elem: typeof React.Component) {
    return <span>Hello, <Elem />!</span>;
}

답변

컴포넌트 클래스를 매개 변수 (인스턴스)로 사용하려면 React.ComponentClass다음을 사용하십시오 .

function renderGreeting(Elem: React.ComponentClass<any>) {
    return <span>Hello, <Elem />!</span>;
}

답변

JSX에서 TSX로 변환하고 일부 라이브러리를 js / jsx로 유지하고 다른 라이브러리를 ts / tsx로 변환 할 때 TSX \ TS 파일의 js / jsx import 문을 변경하는 것을 거의 항상 잊어 버립니다.

import * as ComponentName from "ComponentName";

에

import ComponentName from "ComponentName";

TSX에서 이전 JSX (React.createClass) 스타일 컴포넌트를 호출하는 경우

var ComponentName = require("ComponentName")

답변

소품에 관심이 없다면 가장 넓은 유형은 React.ReactType입니다.

네이티브 dom 요소를 문자열로 전달할 수 있습니다. React.ReactType이 모든 것을 다룹니다 :

renderGreeting('button');
renderGreeting(() => 'Hello, World!');
renderGreeting(class Foo extends React.Component {
   render() {
      return 'Hello, World!'
   }
});

답변

material-ui를 사용하는 경우 TypeScript에서 밑줄이있는 구성 요소의 유형 정의로 이동하십시오. 아마도 당신은 이와 같은 것을 보게 될 것입니다

export { default } from './ComponentName';

오류를 해결하는 두 가지 옵션이 있습니다.

1. JSX .default에서 컴포넌트를 사용할 때 추가하십시오.

import ComponentName from './ComponentName'

const Component = () => <ComponentName.default />

가져올 때 “기본”으로 내보내는 구성 요소의 이름을 바꿉니다.

import { default as ComponentName } from './ComponentName'

const Component = () => <ComponentName />

이 방법으로 .default구성 요소를 사용할 때마다 지정할 필요가 없습니다 .

답변

다음은 나를 위해 일했습니다 : https://github.com/microsoft/TypeScript/issues/28631#issuecomment-472606019 다음과 같이하여 수정하십시오.

const Component = (isFoo ? FooComponent : BarComponent) as React.ElementType

답변

필자의 경우 React.ReactNode유형 대신 기능 구성 요소의 React.FC유형으로 사용하고있었습니다.

이 구성 요소에서 정확히 :

export const PropertiesList: React.FC = (props: any) => {
  const list:string[] = [
    ' Consequat Phasellus sollicitudin.',
    ' Consequat Phasellus sollicitudin.',
    '...'
  ]

  return (
    <List
      header={<ListHeader heading="Properties List" />}
      dataSource={list}
        renderItem={(listItem, index) =>
          <List.Item key={index}> {listItem } </List.Item>
      }
    />
  )
}

스 니펫 확장