JSX 字符串插值到组件名称中答案

【问题标题】：JSX string interpolation into a component nameJSX 字符串插值到组件名称中
【发布时间】：2021-12-29 06:28:49
【问题描述】：

我有这个代码...

import React from 'react';
import Fade from 'react-reveal/Fade';
import { Novice } from '../../../Icons/Novice';
import { Apprentice } from '../../../Icons/Apprentice';
import { Explorer } from '../../../Icons/Explorer';
import { Advocate } from '../../../Icons/Advocate';
import { Profesional } from '../../../Icons/Profesional';
import { Ambassador } from '../../../Icons/Ambassador';

export const ProfileType = (props) => {
  const {
    label = 'Apprentice',
  } = props;
  return (
    <Fade top delay={2100}>
      <div className="profile-card__work-type">
        {
        /* {label === 'Novice' && <Novice />}
        {label === 'Apprentice' && <Apprentice />}
        {label === 'Explorer' && <Explorer />}
        {label === 'Advocate' && <Advocate />}
        {label === 'Profesional' && <Profesional />}
        {label === 'Ambassador' && <Ambassador />} */
        }
        { `< ${label} />` }
        <span className="profile-card__work-type-text">
          {' '}
          {label}
        </span>
      </div>
    </Fade>
  );
};

我想使用 'label' 变量作为我的组件的名称，我正在尝试使用字符串插值来像 { `< ${label} />` } 这样使用它，但它只是将字符串打印到屏幕上。

如何使用标签变量代替几行条件句作为组件的名称？

最好的祝愿，尼古拉斯

【问题讨论】：

标签： javascript reactjs jsx

【解决方案1】：

使用一个对象来存储你的组件...

const obj = {
  Novice: <Novice />,
  Apprentice: <Apprentice />,
  Explorer: <Explorer />,
  Advocate: <Advocate />,
  Profesional: <Profesional />,
  Ambassador: <Ambassador />
};

然后使用标签访问对象。

{obj[label]}

【讨论】：

超酷！非常感谢:)

【解决方案2】：

如果你真的想这样做，你不能只放 < ${label} /> 并期望它被评估为一个组件，你必须在 <div/> 或其他东西上使用 dangerouslySetInnerHTML 道具并给它一个有效的 html细绳。但正如该道具的名称所暗示的那样，考虑到远程代码执行攻击的可能性，它很危险。

解决这个问题的另一种方法，可能是最好的方法，就像另一个答案所建议的那样，将您的组件放在一个数组中或作为对象的属性，并通过数组中组件的索引或键访问它们对象属性。

【讨论】：

感谢您的评论。我将使用将组件放入对象并引用键的优雅解决方案。非常感谢您的帮助:)
酷！现在您可以接受安迪的回答，以便其他人在尝试做同样的事情时也可以从这个解决方案中受益。