Reagieren nicht untergeordneten Elemente

Question

Ich bin neu zu Reagieren, und ich versuche React auf meinem Angular Project zu binden. Derzeit habe ich einige Komponenten, die ich nur Kinderelemente binden muss. Aber ich bekomme diesen Fehler: Invariant Violation: GRID.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

Mein React Code ist hier.

var GRID = React.createClass({ 
    displayName: 'GRID', 
    render: function() { 
    var grid = this.props.grid; 
    var x = 5; //minutes interval 
    var timeSheet = []; // time array 
    var tt = 0; // start time 
    var ap = ['AM', 'PM']; // AM-PM 
    var options = []; 
    var key = 0; 
    //loop to increment the time and push results in array 
    for (var i = 0; tt < 24 * 60; i++) { 
    var hh = Math.floor(tt/60); // getting hours of day in 0-24 format 
    var mm = (tt % 60); // getting minutes of the hour in 0-55 format 
    // timeSheet[i] = ("0" + (hh % 12)).slice(-2) + ':' + ("0" + mm).slice(-2) + ap[Math.floor(hh/12)]; // pushing data in array in [00:00 - 12:00 AM/PM format] 
    tt = tt + x; 
    key += 1; 
    var time = { 
     "key": key, 
     "lable": ("0" + (hh % 12)).slice(-2) + ':' + ("0" + mm).slice(-2) + " " + ap[Math.floor(hh/12)], 
     "value": ("0" + (hh)).slice(-2) + ':' + ("0" + mm).slice(-2) 
    } 
    timeSheet.push(time) 
    } 
    var select = React.createElement('select', 
    timeSheet.map(function (time, index) { 
     var option = React.createElement('option', { value: time.value, key: index, label: time.lable, className: 'md-option' }); 
     return option; 
    }) 
) 
     return React.Children.map(select.props.children, (element, idx) => { 
     console.log(element); 
     return React.cloneElement(element, { ref: idx }); 
     }) 
    } 
    }); 

Was ist das Problem mit diesem Code?

Answer 1

versuchen Sie, Ihre Return-Anweisungen in einem div tag.Else einzuschließen, wenn Ihr Code in plain Javascript konvertiert wird und es wird ein Semikolon am Ende Ihrer Return-Anweisung einfügen und führt daher zu unerreichbaren Code.So umschließen Rückkehr in eine

<div> 
return //your code 
</div>