nach ihrem Zustand in einem React Komponente

Question

I eine Baumstruktur von Komponenten vom Typ A, B, C

Ich mag meine Component_Type_B Komponenten in der Lage sein anzuzeigen (in einem bestimmten Feld) die Anzahl der Component_Type_C innerhalb Und die Component_Type_A Komponenten (in einem bestimmten Feld) die Summe von Component_Type_C anzuzeigen.

So machen Funktion von A wäre so etwas wie:

render { 
    return (<div> 
     <span>Total of Component_Type_C inside: {...}</span> 
     <div>{renderComponentsB}</div> 
    </div>) 
} 

Funktion von B machen wäre so etwas wie:

render { 
    return (<div> 
     <span>Total of Component_Type_C inside: {...}</span> 
     <div>{renderComponentsC}</div> 
    </div>) 
} 

Die Einschränkung ist, dass ich nur zählen, möchte die Component_Type_C mit zwei Statuseigenschaften bis zu einem bestimmten Wert:

ZB:

this.state.has_propA = true 
this.state.has_propB = true 

Diese Eigenschaften jederzeit ändern können, daß Component_Type_C Komponenten werden durch Benutzer-Interaktionen modifizierte

<Component_Type_A> => Should display '7' 
    <Component_Type_B> => Should display '4' 
     <Component_Type_C /> 
     <Component_Type_C /> 
     <Component_Type_C /> 
     <Component_Type_C /> 
    </Component_Type_B> 
    <Component_Type_B> => Should display '2' 
     <Component_Type_C /> 
     <Component_Type_C /> 
    </Component_Type_B> 
    <Component_Type_B> => Should display '1' 
     <Component_Type_C />  
     <Component_Type_C /> // this.state.has_propA = true and this.state.has_propB = false 
     <Component_Type_C /> // this.state.has_propA = true and this.state.has_propB = false 
    </Component_Type_B> 
</Component_Type_A> 

Also, wie kann ich die angezeigten Werte bei Component_Type_B und Component_Type_C auffrischen Level, nach dem Stand Component_Type_C?

Ich habe eine riesige Liste von Component_Type_C verschachtelt in einem Multilevel Component_Type_Bs, so Render-Schleifen zu minimieren ist ein Ziel.

Answer 1

wie geht es?

Ehrlich gesagt ist die einfachste Lösung, ein verschachteltes Array in Ihrem Geschäft zu erstellen.

Jedes Mal, wenn Sie eine ComponentB erstellen, fügen Sie ein leeres Array hinzu. Wenn Sie ein C hinzufügen, suchen Sie das richtige Array und geben einen Wert in das Array ein. Ihre ComponentA wird den Laden überprüfen und die richtigen Prüfungen auf Länge durchführen;

store = { 
    componentStore: [[1, 1, 1, 1], [1, 1], [1, 0, 0, 0]] 
} 

Sie können Ihren Shop strukturieren, wie Sie möchten. Ich bin sicher, dass es effizientere Möglichkeiten gibt, es zu speichern.