Javascript 基于其名称呈现React组件

上下文：我正在开发一个基于widget的webapp（比如已经不存在的iGoogle，用户可以在其中选择要显示的widget）。每个小部件都是一个React组件

简化示例： 这里有两个不同的小部件

var HelloWidget = React.createClass({
    render: function() { return <div>Hello {this.props.name}</div>; }
});

var HiWidget = React.createClass({
    render: function() {  return <div>Hi {this.props.name}</div>; }
});

在字符串变量中包含React组件的名称时，如何呈现该组件

我尝试了这个，基于：

React.render(
,
document.getElementById（'try2'）
);

它以前使用React 0.11，但现在不再使用了

我希望避免出现一个巨大的开关声明：

switch (dataFromDb.type) {
    case 'HiWidget':
        var component = <HiWidget name={dataFromDb.name} />;
        break;
    case 'HelloWidget':
        var component = <HelloWidget name={dataFromDb.name} />;
        break;
}
React.render(
  component,
  document.getElementById('try3')
);

开关（dataFromDb.type）{
案例“HiWidget”：
var分量=；
打破
“HelloWidget”案例：
var分量=；
打破
}
反应(
组成部分，
document.getElementById（'try3'）
);

---

JSFiddle和这里的所有代码：

您可以使用一个对象作为组件类型的查找，并将呈现它的详细信息保存在一个地方：

var components = {
  'HiWidget': HiWidget,
  'HelloWidget': HelloWidget
}

var Component = components[dataFromObj.type]
React.render(
  <Component name={dataFromObj.name}/>,
  document.getElementById('try3')
)

var组件={
“HiWidget”：HiWidget，
“HelloWidget”：HelloWidget
}
var Component=组件[dataFromObj.type]
反应(
,
document.getElementById（'try3'）
)

JSX是JavaScript的超集，因此您可以在JSX中始终使用本机JavaScript语法。例如，如果组件的类在全局空间（

window

）中可用，则可以执行以下操作：

React.render(
  React.createElement(window[dataFromDb.type], {name: dataFromDb.name}),
  document.getElementById('try2')
);

---

jshiddle.

我不明白为什么这里需要

window[…]

！变量dataFromDb在作用域中，因为

dataFromDb.name

工作正常，但如果我删除

窗口[…]

它就不再工作了。@al8anp您需要

window[…]

，因为这样可以获得类的引用，

dataFromDb.name

只是类名称的字符串表示形式

React.createElement（…）

要求类作为第一个参数

var components = {
  'HiWidget': HiWidget,
  'HelloWidget': HelloWidget
}

var Component = components[dataFromObj.type]
React.render(
  <Component name={dataFromObj.name}/>,
  document.getElementById('try3')
)

React.render(
  React.createElement(window[dataFromDb.type], {name: dataFromDb.name}),
  document.getElementById('try2')
);