如何通过变量动态加载与props名称匹配的React组件？

方法一：创建组件映射对象（推荐） #

先在buildings.js中导出一个包含所有组件的映射对象，方便通过名称直接访问：

// buildings.js
export const NewBuilding = () => {
  return (
    <div className="wrapper">New Building</div>
  )
}

export const Barracks = () => {
  return (
    <div className="wrapper">Barracks</div>
  )
}

// 统一导出组件映射
export const BuildingComponents = {
  NewBuilding,
  Barracks
}

然后在BuildingContent组件中导入该映射对象，通过props传入的名称动态获取并渲染组件：

import { BuildingComponents } from './buildings.js';

class BuildingContent extends React.Component {
  render() {
    const targetComponentName = this.props.content.name;
    // React组件变量必须大写开头，否则会被识别为原生HTML标签
    const TargetBuilding = BuildingComponents[targetComponentName];

    // 处理不存在的组件，避免页面报错
    if (!TargetBuilding) {
      return <div className='building-content-wrapper'>未找到对应建筑组件</div>;
    }

    return (
      <div className='building-content-wrapper'>
        <TargetBuilding />
      </div>
    )
  }
}

方法二：直接导入所有导出内容 #

如果不想手动维护映射对象，可以直接用import * as导入buildings.js的所有导出内容：

import * as BuildingComponents from './buildings.js';

class BuildingContent extends React.Component {
  render() {
    const TargetBuilding = BuildingComponents[this.props.content.name];

    if (!TargetBuilding) {
      return <div className='building-content-wrapper'>未找到对应建筑组件</div>;
    }

    return (
      <div className='building-content-wrapper'>
        <TargetBuilding />
      </div>
    )
  }
}

关键注意事项 #

• 组件变量必须大写开头：React会将小写开头的元素判定为原生HTML标签，因此存储组件的变量名首字母必须大写。
• 添加异常处理：务必判断目标组件是否存在，避免传入无效名称导致页面崩溃。

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