ダイナミックJSXタグ名は、エラーを与える：JSX要素タイプ「...」任意の構造を持っているか、

Question

コード署名を呼び出すことはありません。私が持っている JSX element type 'TagName' does not have any construct or call signatures.

：これは、2行目にエラーを与える

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

このエラーで他の同様の質問を読むことはできますが、このケースの修正方法はありません。

誰でもご存知ですか？

Answer 1

JSXを使用する場合、タグ名は可変値ではなくコンポーネントです。例えば

：

ファイルB：

export class ComponentB extends ReactComponent{ 

} 

ファイルA：

import {ComponentB} from 'b'; 

<ComponentB></ComponentB> 

しかし、何らかの理由であなたがダイナミックtagNameをを持っている変数を使用したい場合は（ありますとにかくそれを行う方法が間違っているため）、中身をJavaScriptとして解析するように中かっこを使用する必要があります。

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

これは間違った方法です。これは一般的な方法ではないため、コードを読んでいる他のプログラマーには明らかではありません。

一般的な方法は、そのようなものである：

const someCondition = 1 + 1 === 2; 

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

式の左辺が真である場合、各コンポーネントは単にレンダリングされます。