javascript - 如何基于变量值动态请求React组件？

我想知道如何根据变量值动态请求组件。我要在这里完成的工作如下：

import Template1 from './Template1.jsx';
import Template2 from './Template2.jsx';

var ComponentTemplate = (some_condition === true) ? "Template1" : "Template2"

render() {
    <ComponentTemplate prop1="prop1 val" />
}

这有可能吗？如果是这样，怎么办？

最佳答案

我不清楚，为什么您需要使用类的字符串表示形式而不是仅切换组件或使用条件渲染：

var Component = some_condition === true ? Template1 : Template2;
// ...
return ( <Component /> );

但是假设这过于简单，那么最简单的操作就是使用将字符串转换为组件的映射对象。使用ES2015 enhanced object literals，它变得相当简单：

var Components = {
  Template1,
  Template2,
};

var Component = condition ? Components['Template1'] : Components['Template2'];

// ...

return ( <Component /> );