Question

我是React的新手，我试图在我的Angular Project上绑定React。目前我有一些组件，我只需绑定子元素。但是我收到了这个错误：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.

我的React代码在这里。

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

尝试将你的return语句包含在div标签中。当你的代码转换成普通的javascript时它会在你的return语句的末尾插入一个分号，从而导致无法访问的代码。所以将返回包含在

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

React不呈现子元素

1 个答案: