Javascript 按字符串名称动态实例化子组件-ReactJs

我有一个数组，其中包含React组件字符串名称SampleWidget1；它由外部机制填充。在我的DashboardInterface组件中，我希望使用该数组，呈现其中包含的组件，并在DashboardInterface.render函数中与其他静态定义的HTML一起显示它。我怎样才能在反应中做到这一点

下面是我的尝试；没有错误，但渲染的组件从未真正成功地插入到DOM中。如果我手动将SampleWidget1添加到DashboardInterface.render函数中，它将按预期显示。如果对动态渲染的组件执行相同的操作，则不会显示该组件

有什么建议吗

var widgetsToRender = ["SampleWidget1"];

/**
 * Dashboard that uses Gridster.js to display widget components
 */
var DashboardInterface = React.createClass({

    /**
     * Loads components within array by their name
     */
    renderArticles: function(widgets) {

        if (widgets.length > 0) {

            var compiledWidgets = [];

            // Iterate the array of widgets, render them, and return compiled array
            for(var i=0; i<widgets.length; i++){
                compiledWidgets.push(React.createElement(widgets[i] , {key: i}));
            }

            return compiledWidgets;

        }
        else return [];
    },

    /**
     * Load the jQuery Gridster library
     */
    componentDidMount: function(){

        // Initialize jQuery Gridster library
        $(".gridsterDashboard ul").gridster({
            widget_margins: [10, 10],
            widget_base_dimensions: [140, 140],
            //shift_larger_widgets_down: false
        });

    },

    render: function() {

        // Get the widgets to be loaded into the dashboard
        var widgets = this.renderArticles(widgetsToRender);

        return (
                <div className="gridsterDashboard">
                    <ul >
                        {this.widgets}
                        <SampleWidget1 />
                    </ul>
                </div>
        );
    }

});

下面是我尝试渲染的示例组件：

/**
 * Sample component that return list item that is to be insert into Gridster.js 
 */
var SampleWidget1 = React.createClass({

    render: function() {

        // Data will be pulled here and added inside the list item...

        return (
            <li data-row="1" data-col="1" data-sizex="2" data-sizey="1">testing fake component</li>
        )

    }

});



ReactDOM.render(
  <DashboardInterface />,
  document.getElementById('dashboard')
);

---

为此，应导入组件并选择所需的“按键属性”

1个简短的例子

2完整示例 webpackbin演示

3具有多个组件的示例

---

谢谢你的好例子。我试图用遗留JavaScript编写此代码，因为我还没有学习Es6和编译工作流。您是否熟悉任何在ES5中显示等效设计的资源？@ph34r我可以在ES5上重写它。你想要哪一个例子？你使用模块吗？或者你只需要es5 react组件Sutro，我真的很感谢你的帮助，你已经超越了我。几天来我一直在绞尽脑汁想弄明白这一点，所以第三个示例的ES5格式副本将非常有用。我一直试图只使用ES5 react组件。@ph34r variant with collection，variant with array这太棒了，正是我想弄明白的-非常感谢！看来我走对了方向。

import * as widgets from './widgets.js';

const widgetsToRender = ["Comp1","Comp2","Comp3"];

class App extends Component {
    render(){
        const Widget = widgets[this.props.widgetsToRender[0]] 
        return <Widget />
    }
}

 renderWidgets(selected){
    return selected.map(e=>{
      let Widget =widgets[this.props.widgetsToRender[e-1]];
      return <Widget key={e}/>
    })
  }