Kann ein React-Prop-Typ rekursiv definiert werden?

Question

Angenommen, wir definieren eine React-Klasse, die einen Baum anzeigt.

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

Hier ist eine Definition von treeType, die offensichtlich nicht, aber hoffentlich zeigt nicht funktioniert, was ich versuche auszudrücken.

Gibt es eine Möglichkeit, den Typ faul auf sich beziehen zu lassen, damit das funktioniert?

Answer 1

Ein Reagieren prop Typ ist nur eine Funktion, so kann es sich träge wie folgt referenziert werden:

für ein komplettes Arbeitsbeispiel ( also available as a jsfiddle)

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

Der Rest des Codes:

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

Screenshot des Ergebnisses: