Question

我正在尝试为基于客户端需求动态调用组件的应用程序设置前端。因此，我们有一个索引文件，其中导入了三个组件ComponentOne ComponentTwo ComponentThree

我这样导入import * as components from '../components'

然后在我的render方法中，我有一个称为componentString的道具（从父组件传递过来），该道具本质上用于检查该组件是否应存在于该用户版本的网站上。

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

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

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

Answer 1

取自官方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} />;
}

Answer 2

您尝试过吗：

// Outside class/function
const MyComponent = Components.componentString;

// ....render

<MyComponent />

如何使用从索引文件导入名称空间来动态调用模块？

2 个答案: