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

Question

我正在使用React构建一个web应用程序，它显示了您选择的建筑的蓝图，位于已选择的校园中。

我有一个“内容”组件，根据您的选择加载校园或建筑地图。“构建地图”组件需要根据您选择的建筑加载特定的蓝图。它获取带有建筑物名称的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

要补充@Andreyco的答案：

对组件类使用字符串ID/名称的查找表是一种典型的React习惯用法。一个常见的用例是模态管理器组件，它可以呈现多种不同类型的模态。有关一些示例，请参见Dan Abramov在“如何在Redux中呈现模态对话框？”（不是特定于Redux），以及我的React/Redux链接列表的React组件模式#模态对话框和Redux技术#UI部分中的一些相关文章。

根据@azium的评论：完全可以使用动态导入（通过require.sure（）或新的import（）函数）在运行时加载块，并且可以在加载时将这些动态导入块的导出添加到查找表中。

Answer 2

这个问题很古老，但是当我在寻找如何解决同样的问题时，让我给出我的答案。它可以通过动态导入React.lazy：

const OtherComponent = React.lazy(() => import('./OtherComponent'));

点击这里查看更多详情：https://reactjs.org/docs/code-splitting.html#reactlazy

Answer 3

不幸的是，您不能在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>
    )
  }
}