Ich habe ein Array, das die Namen der React Component-Zeichenfolgen enthält ("SampleWidget1"). Es wird von einem externen Mechanismus bevölkert. In meiner DashboardInterface-Komponente möchte ich dieses Array verwenden, die darin enthaltenen Komponenten rendern und es unter anderem statisch definierten HTML-Code in der DashboardInterface.render-Funktion anzeigen. Wie kann ich das in React machen?

Below ist mein Versuch; Es gibt keine Fehler, aber die gerenderten Komponenten werden nie erfolgreich in das DOM eingefügt. Wenn ich das SampleWidget1 manuell zur DashboardInterface.render-Funktion () hinzufüge, wird es wie erwartet angezeigt. Wenn ich dasselbe mit der dynamisch gerenderten Komponente mache, wird sie nicht angezeigt.

Irgendwelche Vorschläge

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>
        );
    }

});

Hier ist eine Beispielkomponente, die ich rendern möchte:

/**
 * 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')
);