子要素をレンダリングしないでください

Question

私はReactを初めて使う人です。私はReactを私のAngular Projectにバインドしようとしています。現在私は子供の要素だけをバインドする必要があるいくつかのコンポーネントがあります。しかし、私はこのエラーが発生しています：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.

私のリアクションコードはこちらです。

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

このコードの問題点は何ですか？

Answer 1

divタグ内にreturn文を入れてみましょう。あなたのコードがプレーンなjavascriptに変換され、return文の最後にセミコロンが挿入されて到達不能なコードになります。

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