React如何通过字符串变量动态渲染对应组件，替代多行条件判断

解决方案 #

你当前的写法是直接生成了字符串，JSX不会将字符串识别为组件进行渲染，你可以通过建立字符串与组件的映射表实现需求，无需写多行条件判断。

完整修改代码如下：

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';

// 建立label值到对应组件的映射表
const IconComponentMap = {
  Novice,
  Apprentice,
  Explorer,
  Advocate,
  Profesional,
  Ambassador
}

export const ProfileType = (props) => {
  const {
    label = 'Apprentice',
  } = props;
  // 取出对应组件，变量名首字母必须大写，React才会识别为自定义组件
  const RenderIcon = IconComponentMap[label]
  return (
    <Fade top delay={2100}>
      <div className="profile-card__work-type">
        {/* 非空判断避免传入无效label时报错 */}
        {RenderIcon && <RenderIcon />}
        <span className="profile-card__work-type-text">
          {' '}
          {label}
        </span>
      </div>
    </Fade>
  );
};

注意事项 #

• 从映射表取出的组件变量名必须首字母大写，否则会被React判定为原生HTML标签导致渲染异常
• 新增图标类型时，只需在导入组件后，在IconComponentMap中新增对应的键值对即可，无需修改渲染逻辑

内容的提问来源于stack exchange，提问作者Nicolas Thompson