Un tipo di puntello React può essere definito in modo ricorsivo?

Question

Supponiamo di definire una classe React che visualizzerà un albero.

React.createClass({ 
    propTypes: { 
     tree: treeType 
    }, 
    render: function() { 
     // ... 
    } 
}); 

Ecco una definizione di treeType che, ovviamente, non funziona, ma si spera illustra quello che sto cercando di esprimere.

var treeType = React.PropTypes.shape({ 
    value: React.PropTypes.string, 
    children: React.PropTypes.arrayOf(treeType) 
}) 

Esiste un modo per lasciare che il tipo di riferirsi a se stesso pigramente in modo da questo può funzionare?

Answer 1

Un React tipo prop è solo una funzione, in modo che possa essere riferimento pigramente simili:

function lazyFunction(f) { 
    return function() { 
     return f.apply(this, arguments); 
    }; 
} 

var lazyTreeType = lazyFunction(function() { 
    return treeType; 
}); 

var treeType = React.PropTypes.shape({ 
    value: React.PropTypes.string.isRequired, 
    children: React.PropTypes.arrayOf(lazyTreeType) 
}) 

Il resto del codice per un esempio operativo completo (also available as a jsfiddle):

function hasChildren(tree) { 
    return !!(tree.children && tree.children.length); 
} 

var Tree = React.createClass({ 
    propTypes: { 
     tree: treeType 
    }, 
    render: function() { 
     return this.renderForest([this.props.tree], ''); 
    }, 
    renderTree: function (tree, key) { 
     return <li className="tree" key={key}> 
      <div title={key}>{tree.value}</div> 
      {hasChildren(tree) && 
       this.renderForest(tree.children, key)} 
     </li>; 
    }, 
    renderForest: function (trees, key) { 
     return <ol>{trees.map(function (tree) { 
      return this.renderTree(tree, key + ' | ' + tree.value); 
     }.bind(this))}</ol>; 
    } 
}); 

var treeOfLife = { value: "Life", children: [ 
    {value: "Animal", children: [ 
     {value: "Dog"}, 
     {value: "Cat"} 
    ]}, 
    {value: "Plant"} 
]}; 

React.render(
    <Tree tree={treeOfLife}/>, 
    document.getElementById('tree')); 

Schermata del risultato: