Question

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

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

我尝试过import，fetch和require，但似乎没什么用。

请帮忙。

我的代码看起来像这样：

//内容组件

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

// BuildingMap Component

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>
    )
  }
}

Answer 2

添加到@ Andreyco的答案：

使用字符串ID /名称到组件类的查找表是典型的React习惯用法。一个常见的用例是模态管理器组件，它可以呈现多种不同类型的模态。有关示例，请参阅Dan "How can I render a modal dialog in Redux?"上的Dan Abramov答案（不是特定于Redux），以及我React Component Patterns#Modal Dialogs的Redux Techniques#UI和React/Redux links list部分中的一些相关文章

Per @ azium的评论：绝对可以使用动态导入（通过require.ensure()或新的import()函数）在运行时加载块，并且可以从这些动态导入的块添加导出加载后进入查找表。

Answer 3

这个问题已经很老了，但是当我寻找如何解决相同的问题时，让我给出答案。可以通过动态导入React.lazy来完成：

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

在此处查看更多详细信息：https://reactjs.org/docs/code-splitting.html#reactlazy

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

3 个答案: