根据名称呈现React组件

时间:2015-03-22 13:52:24

标签: javascript reactjs react-jsx

背景信息:我正在开发基于小部件的Web应用程序(就像已停用的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组件

我试过这个,基于Dynamically Rendering a React component

React.render(
  <dataFromDb.type name={dataFromDb.name} />,
  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')
);

JSFiddle包含以下所有代码:http://jsfiddle.net/61xdfjk5/

2 个答案:

答案 0 :(得分:16)

您可以使用对象作为组件类型的查找,并将详细信息保存在一个位置:

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

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

答案 1 :(得分:3)

JSX是JavaScript的超集,因此您始终可以在JSX中使用本机JavaScript语法。例如,如果组件的类在全局空间(window)中可用,则可以执行以下操作:

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

JSFiddle here