JSX element type 'TabComponent' does not have any construct or call signatures.

{props.items.map((TabComponent, index) => {
        return <TabComponent key={uid(index)} />;
      })}

 

items에 들어있는 컴포넌트들을 순서대로 뿌려주려고 하던 도중 아래와 같은 오류가 발생했다.

JSX element type 'TabComponent' does not have any construct or call signatures.

원인

생성자와 인스턴스의 차이때문이다.

// 컴포넌트 선언
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' />; // JSX에 표기함.(타입스크립트 에러)

선언된 컴포넌트를 생성하지 않고 그대로 전달해야 JSX가 컴파일 되면서 자동으로 인스턴스화 된다.

 

위 에러는 이미 인스턴스화 된 컴포넌트를 JSX에서 사용했기 때문에 타입스크립트가 "TabComponent는 생성자가 없습니다" 라고 불평하는것이다. 인스턴스를 전달하지 않고 클래스형 혹은 함수형 컴포넌트 자체를 전달해야한다.