根据名称渲染一个React组件

  • Z时代
  • 2024-01-10
  • 分类：问答

上下文：我正在开发一个基于窗口小部件的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组件？

我基于动态渲染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/

回答：

您可以将一个对象用作组件类型的查找，并将呈现它的详细信息放在一个位置：

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

以上是 根据名称渲染一个React组件 的全部内容， 来源链接： utcz.com/qa/423066.html

回到顶部