Wie dekoriere ich eine reaktive Komponente und alle ihre Kinder?

Question

https://jsfiddle.net/69z2wepo/81913/

Ich dekoriere einen Komponentenbaum und füge einige Metadaten zu meinen Komponenten hinzu. Funktioniert wunderbar auf der obersten Ebene Komponente (A); aber wenn ich versuche, meine Sub-Komponenten zu dekorieren (auskommentiert, aber nicht kommentierend, illustriert das Problem), werden die Renderkettenumbrüche und Requisiten, die weitergegeben werden, nicht richtig (oder überhaupt) gerendert. Hat jemand einen Einblick - ich habe oben eine Geige angebracht.

var dec = (t, k, d) => { 
    console.log('hello decoration') 
    var el = React.cloneElement(d.value(), {'label': 'my-component-label'}) 
    return {value:() => el} 
} 

class B extends React.Component{ 
    constructor(props) { 
    super(props) 
    } 
    //@dec 
    render() { 
    return <div> 
     {this.props.data} 
    </div> 
    } 
} 
class A extends React.Component{ 
    constructor(props) { 
    super(props) 
    } 

    @dec 
    render() { 
    return <div> 
     <B data={99 + 101}/> 
    </div> 
    } 
} 

ReactDOM.render(
    <A/>, 
    document.getElementById('container') 
); 

Answer 1

Um Rekursion zu verstehen, müssen Sie zuerst Rekursion verstehen!

Abgesehen davon, habe ich dieses Snippet erfolgreich in der Vergangenheit verwendet habe:

recursiveCloneChildren(children) { 
    return React.Children.map(children, (child) => { 
    let childProps = {}; 

    if (!child || !child.props) { 
     return child; 
    } 
    childProps.DECORATED = true; 
    childProps.children = this.recursiveCloneChildren(child.props.children); 
    return React.cloneElement(child, childProps); 
    }); 
} 

nur gibt ihm die this.props.children eine Komponente und es wird den Rest erledigen. In diesem Snippet fügen wir einfach einen booleschen Wert DECORATED zu allen Kindern hinzu.