Ostrzeżenie: React.createElement: typ nie powinien mieć wartości null ani undefined.

Question

Oczekiwanie na poniższy kod, aby dołączyć nieuporządkowaną listę i jej podrzędne <"li" /> węzłów do document.body, to jest OK z <"ul" />, ale bez żadnych dzieci i z komunikatem o błędzie w konsoli:

React.createElement: type should not be null or undefined. It should be a string (for DOM elements) or a ReactClass (for composite components). 

(React.js ver.0.13)

var ListView = React.createClass({ 
    render: function() { 
     var items = this.props.data.map(function(item) { 
      return ItemDelegate({key:item.id, data:item.id}); 
     }.bind(this)); 
     return (React.createElement('ul', null, items)); 
    } 
}); 

var ItemDelegate = React.createFactory(ListViewChildren); 

var ListViewChildren = React.createClass({ 
    render: function(){ 
     return (React.createElement('li', {key: this.props.key, data: this.props.data})); 
    } 
}); 

var Wrapper = React.createClass({ 
    render: function() { 
     return (React.createElement(ListView, {data: [/*some data*/]})); 
    } 
}); 

React.render(React.createElement(Wrapper), document.body); 

Co typ to jest i gdzie to jest, że zaznaczono typ należy zadeklarować? Sądzę, że istnieje całkowite niezrozumienie tej koncepcji, ale gdzie?

Answer 1

Ostrzeżenie pochodzi od

var ItemDelegate = React.createFactory(ListViewChildren); 

ListViewChildren jest zdefiniowany poniżej tak React nie można utworzyć fabrykę.

Po prostu przenieś powyższe var ListViewChildren = ..., a ostrzeżenie zniknie.

Masz również problem w klasie ListView: Twój items powinny być dzieci, a nie rekwizyty:

// items as props (2nd arg): won't work, html elements don't have props :) 
return (React.createElement('ul', items)); 
// items as children (3rd arg) should work better 
return (React.createElement('ul', null, items)); 

Pełny kod: http://jsfiddle.net/Lmb7t9pv/2/