javascript - 如何根据变量值动态请求 React 组件？

Question

我想知道如何根据变量值动态请求组件。我在这里要完成的是以下内容:

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

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

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

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

Answer 1

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

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 /> );