javascript - 如何使用从索引文件导入 namespace 来动态调用模块？

我试图将前端设置为可根据客户需求动态调用组件的应用程序。所以我们有一个索引文件，其中导入了三个组件ComponentOne ComponentTwo ComponentThree
我这样导入import * as components from '../components'
然后，在我的render方法中，我有一个称为componentString的 Prop (从父组件传递过来)，该 Prop 本质上用于检查该组件是否应存在于该用户版本的网站上。

例如，此组件字符串将为“ComponentOne”。我有一个包装器，用于检查特定组件是否在用户后端上，然后应调用并呈现该组件。

我的问题是如何使用此字符串本质上调用该组件。

我已经尝试过<components[componentString] />或<components.componentString />或{component[componentString]}之类的东西，最后尝试了{components.componentString]}。所有这些都不起作用，从本质上讲，我只希望结果等于<ComponentOne />，但是调用类似<componentString />的方法也不起作用。

最佳答案

摘自官方的react docs，我想你需要像下面这样写。基本上，您需要先将其添加为CapitalizedComponent，然后再尝试呈现它。

import React from 'react';
import { PhotoStory, VideoStory } from './stories';

const components = {
  photo: PhotoStory,
  video: VideoStory
};

function Story(props) {
  // Correct! JSX type can be a capitalized variable.
  const SpecificStory = components[props.storyType];
  return <SpecificStory story={props.story} />;
}