从字符串创建React类的实例

Question

我有一个字符串,其中包含类的名称(这来自一个json文件).这个字符串告诉我的Template Class哪个布局/模板用于数据(也在json中).问题是我的布局没有显示.

Home.jsx:

//a template or layout.
var Home = React.createClass({
  render () {
    return (
    <div>Home layout</div>
    )
  }
});

Template.jsx:

var Template = React.createClass({
  render: function() {
    var Tag = this.props.template; //this is the name of the class eg. 'Home'
    return (
        <Tag />
    );
  }
});

我没有得到任何错误,但我也没有看到布局/ Home Class.我检查了props.template,这会记录正确的信息.此外,我可以在DOM中看到home元素.但它看起来像这样:

<div id='template-holder>
    <home></home>
</div>

如果我将以下行更改为:

var Tag = Home;
//this works but it's not dynamic!

任何想法,我如何解决这个问题？我确定它要么是简单的修复,要么是我做了一些愚蠢的事情.帮助将不胜感激.如果已经有人问过这个道歉(我找不到).

谢谢,Ewan

Answer 1

这不起作用:

var Home = React.createClass({ ... });

var Component = "Home";
React.render(<Component />, ...);

但是,这将:

var Home = React.createClass({ ... });

var Component = Home;
React.render(<Component />, ...);

所以你只需要找到一种在字符串 "Home"和组件类 之间进行映射的方法Home.一个简单的对象将作为基本注册表工作,如果您需要更多功能,可以从那里构建.

var components = {
  "Home": Home,
  "Other": OtherComponent
};

var Component = components[this.props.template];

Answer 2

如果您可以将所有组件放在一个模块中,那么无需手动将类映射到字典即可实现:

   import * as widgets from 'widgets';
   var Type = widgets[this.props.template];
   ...
   <Type />

通配符import语句已经是字典,代码的工作方式与上一个答案中的注册表类似.

实际上,我认为你可以使用一个额外的映射来处理多个模块:

import * as widgets from 'widgets';
import * as widgets2 from 'widgets2';

const registry = Object.assign({}, widgets, widgets2);
const widget = registry[this.props.template];

我完全会这样做.事实上我认为我是.

Answer 3

我遇到了同样的问题，并自己找到了解决方案。我不知道是否是“最佳实践”，但它有效，我目前在我的解决方案中使用它。

您可以简单地使用“evil” eval 函数来动态创建 React 组件的实例。就像是：

function createComponent(componentName, props, children){
  var component = React.createElement(eval(componentName), props, children);
  return component;
}

然后，只需在您想要的地方调用它：

var homeComponent = createComponent('Home', [props], [...children]);

如果它符合您的需求，也许您可​​以考虑这样的事情。

希望能帮助到你。