根据名称渲染 React 组件

Question

上下文：我正在开发一个基于小部件的 web 应用程序（就像已停用的 iGoogle，用户可以在其中选择他们想要显示的小部件）。每个小部件都是一个 React 组件。

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

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 语句：

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 语法。例如，如果类的组件在全局 space (window) 中可用，您可以执行以下操作：

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

JSFiddle here.

根据名称渲染 React 组件

Render a React component based on its name

javascript

reactjs

react-jsx