动态jsx标记名称给出错误：JSX元素类型“...”没有任何构造或调用签名

Question

代码：

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

这会在第2行产生错误： JSX element type 'TagName' does not have any construct or call signatures.

我已经阅读了有关此错误的其他类似问题，但没有提供有关如何解决此案例的解决方案。

有人有任何想法吗？

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

如果表达式的左侧为真，则将呈现每个组件。