die Wiederverwendung von Komponenten-Instanz in reagieren Rendern

Übergeordneten Klasse mehrere Kinder hat Komponenten, die alle die Kinder, die instanziiert werden innerhalb render-Methode, so dass jede änderung zu den übergeordneten Staat wird dazu führen, dass alle Kinder neu instanziiert , jedes mal Rendern aufgerufen wird, reagieren schafft neue Instanz der Kinder, gibt es durch den zu verlieren, der Zustand der Kinder, um die Wiederverwendung der Kind-Instanz habe ich versucht das abrufen von Kind-Instanz mithilfe von Eltern.refs.childRef , aber das gibt mir Fehler

Nicht abgefangener Fehler: die Objekte werden nicht gültig wie ein Kind Reagieren

hier ist mein code

placeHolderComponent(){
        let component;
        let palceHolderValue=this.state.uiState.placeHolder;
        let classInstance=this;
        if(palceHolderValue=='empty'){
            component=<EmptyComponent></EmptyComponent>
        }
        else if(palceHolderValue=='search'){
                component= classInstance.refs.gpSearchComponent!=null?  classInstance.refs.gpSearchComponent:    <GpSearch  ref="gpSearchComponent"/>
        }
        return component;
    }

hier GpSearch Komponente instanziiert wird mit einem ref-Attribut , und der code, der prüft, ob Elternteil.refs.childComponentRefId ist nicht null, dann machen Sie das Beispiel, anstatt eine neue Instanz. Ich bin immer diese Fehlermeldung

Nicht abgefangener Fehler: die Objekte werden nicht gültig wie ein Kind Reagieren (…. Wenn Sie
bedeutete für die Darstellung einer Sammlung von Kinder, verwenden Sie ein array statt oder wrap
das Objekt mit createFragment(Objekt) vom Reagieren add-ons

InformationsquelleAutor user884424 | 2016-12-02



One Reply
  1. 1

    „jede änderung an den übergeordneten Staat wird dazu führen, dass alle Kinder neu instanziiert“

    Nein, jede änderung an den übergeordneten Staat kann die Ursache für eine re-Rendern von Eltern und Ihren Kindern. Untergeordnete Komponenten werden nicht neu, aber neu gerendert (obgleich Sie können, vermeiden re-rendering der Kinder mit dem life-cycle-hook shouldComponentUpdate).

    „zu verlieren, der Staat der Kinder“

    wieder Nicht. Kinder verlieren nicht Ihren inneren Zustand, wenn es neu gerendert.

    Wird der Fehler vermutlich ausgelöst durch diese Zeile:

     component = classInstance.refs.gpSearchComponent != null ?  classInstance.refs.gpSearchComponent: <GpSearch  ref="gpSearchComponent"/>

    weil classInstance.refs.gpSearchComponent ist ein Objekt und wie Reagieren meckert „nicht abgefangener Fehler: die Objekte werden nicht gültig wie ein Kind Reagieren“.

        if(palceHolderValue=='empty'){
            component=<EmptyComponent></EmptyComponent>
        }
        else if(palceHolderValue=='search'){
                component= classInstance.refs.gpSearchComponent!=null?  classInstance.refs.gpSearchComponent:    <GpSearch  ref="gpSearchComponent"/>
        }
        return component;

    laut ^^ dieser code, denke ich, dass Sie entweder Rendern eine EmptyComponent oder GpSearch Komponente. Also immer dann, wenn die placeHolderValue änderungen, die Sie heben Sie die Bereitstellung des derzeit neu gerenderte Komponente an. Das ist, wie Sie Ihre Komponente erneut instanziiert jeder Zeit, und damit verlieren Sie den internen Zustand der Kind-Komponenten.

    Ein alternativer Ansatz ist, halten Sie den Zustand der Kinder in Ihrer übergeordneten (parent-Komponente ist-Zustand) auf und übergeben Ihr als Requisiten, um Kinder als erforderlich.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.