如何使用变量在React中导入组件或文件？

Question

我正在使用React构建一个Web应用程序，该应用程序在一个已经选定的园区中显示您选择的建筑物的蓝图。

我有一个“内容”组件，可根据您的选择加载校园或建筑地图。“ BuildingMap”组件需要根据您选择的建筑物来加载特定的蓝图。它以建筑物的名称获取props.building，但我不知道如何使用该变量加载组件。

我尝试了导入，获取和要求，但似乎没有任何效果。

请帮忙。

我的代码如下所示：

//内容组件

<BuildingMap building={selectedBuilding} campus={selectedCampus} />

// BuildingMap组件

import *MyBlueprint* from (specific folder depending on the campus selected)

class BuildingMap extends React.Component {
  render(){
    return (
      <div className="blueprint" id={this.props.building}>
         {*MyBlueprint*}
      </div>
    )
  }
}

Answer 1

不幸的是，您无法在 React 环境中动态导入/需要组件。

根据建筑物/蓝图的数量，可以一一导入，创建组件构建地图并通过建筑物ID选择组件。

如果有许多/无限的组件需要加载，我肯定会选择另一种方法 - 不知道你的问题的内容。

import BlueprintA from './BlueprintA'
import BlueprintB from './BlueprintB'
import BlueprintC from './BlueprintC'
// ...

class BuildingMap extends React.Component {
  render(){
    const C = {
      buildingA: BlueprintA,
      buildingB: BlueprintB,
      buildingC: BlueprintC,
      // ...
    }[this.props.building]

    return (
      <div className="blueprint" id={this.props.building}>
         <C />
      </div>
    )
  }
}