Reagieren: verschachtelte wiederverwendbare Komposition Komponenten innerhalb einer höheren Bestellkomponente

Question

Ich habe versucht, meinen Kopf für eine Weile um dieses Problem zu wickeln. Ich habe eine Lösung gehackt, die funktioniert, bis ich verschachtelte divs bekomme, dann fallen die Dinge auseinander. Grundsätzlich versuche ich Kompositionskomponenten zu erstellen, die in einer Komponente höherer Ordnung leben und alle den gleichen aktuellen Zustand haben. Ich muss das dann exportieren, damit jede Datei diese Komponenten verwenden kann. Also hier ist es, was die JSX aussehen könnte:

<Panel countersStartAt=5> 
    <Counter incrementsBy=1 /> 
    <div> 
    <Counter incrementsBy=2 /> 
    </div> 
    <TotalCounter className="someclass" /> 
</Panel> 

So ist die Art, wie ich so etwas zu arbeiten wollen, ist, dass ich diese Wrapper-Panel-Komponente haben, die eine gewisse Anfangszustand setzt, sagen this.state.start = 5. Innerhalb Panel, eine Counter-Komponente würde einen onClick-Handler haben, der state.start um incrementsBy inkrementiert. Und TotalCounter wäre eine Komponente, die state.start anzeigt. Natürlich ist dies ein künstliches Beispiel, also wäre es hilfreich, nicht zu erwähnen, wie ich diese bestimmte Komponente besser machen könnte. Ich versuche, dies auf eine realistischere Situation anzuwenden.

Die zweite Sache wäre, wie diese Komponenten auf eine Weise exportiert werden, dass ich den genauen Code oben in einer separaten Datei innerhalb einer zustandslosen Komponente erstellen kann. Hoffentlich macht das Sinn.

Dies ist ein Ausschnitt dessen, was ich tue, um dies zu erreichen.

renderChildren = (children) => { 
    return React.Children.map(children, (child) => { 
     if (React.isValidElement(child)) { 
     return React.createElement(
      (child.type.name ? this[child.type.name] : child.type), 
      child.props 
     ); 
     } 
     return child; 
    }); 
    }; 

    render =() => { 
    return (
     {this.renderChildren(this.props.children)} 
    ) 
    }; 

dann außerhalb der Panel-Klasse, wie ich bin Export so:

export const Counter =() => null;

Genau so ist es Zähler aussetzt. Das Standard-Rendering von null passiert nicht, weil ich Counter durch die this.Counter() -Methode innerhalb von Panel ersetze.

Fragen in Kommentare und anderes fragte

• I Flux oder Redux
• bin mit nicht zu prüfen, wird angenommen, dass das Gremium Codeausschnitt verwendet wird in mehreren Verfahren über mehrere Projekte machen, die nicht implementieren Flussmuster oder Redux
• Angenommen, dass diese Code-Snippets nicht neu geschrieben werden können
• Wie können Panel, Counter und TotalCounter exportiert werden? Ist es möglich, dies für Counter und TotalCounter zu tun, da es sich um Methoden innerhalb der Panel-Klasse handelt? Meine Nachforschungen führten zu Nein und das Erstellen von "Dummy" -Komponenten, die exportiert werden, damit die aktuelle Datei sie ohne Fehler verwenden kann.

Answer 1

in einer Antwort setzen hier für das, was wir über Zimmer im Chat gesprochen

die beste Art und Weise zu handhaben, was Sie ohne Datenmanagement-Framework wie Redux oder Flux wird tun wollen Ihre Daten passieren, wie Requisiten durch, so.

class Panel extends Component { 

    constructor(){ 
     super() 
     this.state = {count: 5} 
    } 
    incrementCount = (incrementer) => { 
     this.setState({count: this.state.count + incrementer}); 
    } 
    render(){ 
     return (
     <div> 
      <Counter incrementCount={this.incrementCount} count={this.state.count} incrementsBy=2 /> 
     </div> 
    ); 
    } 

} 

dann in Ihrem Zähler ..

<someElement onClick={ (e) => {this.props.incrementCount(this.props.incrementsBy)} }>{this.props.count}</someElement>