根據名稱呈現React組件

Question

上下文：我正在開發基於小部件的webapp（就像已經不存在的iGoogle，用戶可以選擇要顯示的小部件）。 每個小部件都是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>; }
});

作為用戶，我選擇了HiWidget，我的名字是“dude”，所以當系統從持久層獲取我的偏好時，它看起來像這樣：

var dataFromDb = {
    type: 'HiWidget',
    name: 'dude'
};

當我在字符串var中使用其名稱時，如何呈現React組件？

我嘗試了這個，基於動態渲染React組件 ：

React.render(
  <dataFromDb.type name={dataFromDb.name} />,
  document.getElementById('try2')
);

它曾經與React 0.11一起使用，但現在不再使用了。

我想避免使用巨大的switch語句：

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

JSFiddle在這里有所有這些代碼： http ： //jsfiddle.net/61xdfjk5/

Answer 1

您可以使用對象作為組件類型的查找，並將詳細信息保存在一個位置：

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

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

Answer 2

JSX是JavaScript的超集，因此您始終可以在JSX中使用本機JavaScript語法。 例如，如果組件的類在全局空間（ window ）中可用，則可以執行以下操作：

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

JSFiddle 在這里 。