동적 jsx 태그 이름은 오류 제공 : JSX 요소 유형을 '...'서명

Question

어떤 구조를 가지고 또는 호출하지 않습니다

코드 : 내가 가지고있는 JSX element type 'TagName' does not have any construct or call signatures.

:

const TagName = 'div'; 
const element = <TagName>....</TagName> // line 2 

이 2 행에 오류가 있습니다 이 오류로 다른 유사한 질문을 읽지 만,이 경우를 해결하는 방법에 대한 해결책은 없습니다.

누구든지 아이디어가 있으십니까?

Answer 1

JSX를 사용할 때 태그 이름은 변수 값이 아니라 구성 요소입니다.

이

파일 B가 :

이

export class ComponentB extends ReactComponent{ 

} 

파일 A는 : 어떤 이유로 당신이 (동적 태그 이름을 가지고 변수를 사용하려면

가

import {ComponentB} from 'b'; 

<ComponentB></ComponentB> 

그러나 예를 들면

어쨌든 그렇게하는 잘못된 방법), 따라서 자바 스크립트로 내용을 파싱하는 중괄호를 사용해야합니다.

const TagName = 'div'; 
const element = <{TagName}>....</{TagName}> // line 2 

이것은 일반적인 방법이 아니므로 잘못된 코드입니다. 따라서 코드를 읽는 다른 프로그래머에게는 명확하지 않습니다.

일반적인 관행은 같다 :

const someCondition = 1 + 1 === 2; 

{someCondition && 
<ComponentA></ComponentA>} 
{!someCondition && 
<ComponentB></ComponentB>} 

각 구성 요소는 식의 왼쪽에 해당하는 단지 경우 렌더링됩니다.