Das Umschalten zwischen React-Antd-Tabs führt zu wiederholter Aktualisierung von Unterkomponenten

Das Umschalten zwischen React-Antd-Tabs führt zu wiederholter Aktualisierung von Unterkomponenten

beschreiben:

Wenn die Tabs-Komponente hin- und herschaltet, werden die gleichen im TabPane enthaltenen Unterkomponenten wiederholt gerendert, zum Beispiel:

<Registerkarten
 activeKey={tabActiveKey}
 beiÄnderung={(Schlüssel: Zeichenfolge) => this.changeTab(Schlüssel)}
 Typ="Karte"
>
  <TabPane tab={"Externe Autorisierung"} key="/authed-by-me">
    <AuthedCollections
        Sammlungstyp = {dieser.Sammlungstyp}
     />
  </TabPane>
  <TabPane tab={"Berechtigungen beantragen"} key="/authed-to-me">
    <AuthedCollections
      Sammlungstyp = {dieser.Sammlungstyp}
     />
  </TabPane>
</Tabs>


changeTab = (Schlüssel: Zeichenfolge) => {
 this.collectionType = Schlüssel === '/authed-by-me'? CollectionEnums.AUTHED_TO_GRANT: CollectionEnums.AUTHED_TO_APPLY;
 dies.setState({
  tabActiveKey: Schlüssel
 })
};

analysieren:

Rufen Sie setState in der onChange-Listener-Funktion changeTab von Tabs auf, wodurch die Seite neu gerendert wird. Die Strategie von Antd besteht darin, nur das Aktuelle zu rendern. Wenn der Benutzer wechselt, werden die zuvor gerenderten Knoten nicht gelöscht. Die Anzahl der Klicks zum Umschalten wird also nach und nach erhöht. Dies soll verhindern, dass Benutzer während der Mount-Phase asynchrone Anfragen stellen, was beim Umschalten zu wiederholtem Rendering führt. Daher wird erwartet, dass die Anzahl der Renderings aktualisiert und erhöht wird, wenn die obere Ebene aktualisiert wird.

Lösung:

Verwenden Sie das bedingte Rendering von React, um bei jedem Wechseln der Registerkarte die vorherige Seite aus dem Dom-Baum zu verschieben

<Registerkarten
 activeKey={tabActiveKey}
 beiÄnderung={(Schlüssel: Zeichenfolge) => this.changeTab(Schlüssel)}
 Typ="Karte"
>
 <TabPane tab={"Externe Autorisierung"} key="">
 {
 this.collectionType === CollectionEnums.AUTHED_TO_GRANT &&
 <AuthedCollections
 Sammlungstyp = {dieser.Sammlungstyp}
 />
 }
 </TabPane>
 <TabPane tab={"Berechtigungen beantragen"} key="/authed-to-me">
 {
 this.collectionType === CollectionEnums.AUTHED_TO_APPLY &&
 <AuthedCollections
 Sammlungstyp = {dieser.Sammlungstyp}
 />
 }
 </TabPane>
</Tabs>

Antd Tabs aktuelle Seite wechselt hin und her, die Formulardaten werden nicht gelöscht (oder gelöscht)

So löschen Sie das Formular: this.props.form.resetFields();

Dieser Artikel erklärt jedoch hauptsächlich

Durch die flexible Verwendung von display:none kann vermieden werden, dass die Formulardaten beim Wechseln neu gerendert und von setState gelöscht werden (d. h. beim Wechseln von Registerkartenelementen, ohne das Formular zu löschen).

Abfragebereich

{/* Abfragebereich*/}
    <div className="Suchformularbereich">
     {
      <div style={{ display: activeKey === '1' ? 'block' : 'none' }}><SearchFieldForm // Projektwinkel ref={(form) => this.ProjSearchForm = form}
       submitFuc={this.getProjPage}
       FelderData={projSearchData}
       colNum={4}
       diyItemLayout={{ labelCol: { span: 4 }, wrapperCol: { span: 17 } }}
      // mehrSuchdaten={mehrSuchdaten}
      /></div>
     }
     {
      <div style={{ display: activeKey === '2' ? 'block' : 'none' }}>< SearchFieldForm // Produktwinkel ref={(form) => this.PrdSearchForm = form}
       submitFuc={this.getProjPage}
       FelderDaten={prdSearchData}
       colNum={4}
       diyItemLayout={{ labelCol: { span: 4 }, wrapperCol: { span: 17 } }}
      /></div>
     }
    </div>

Listenbereich

 {/* Listenbereich */} 
        <div Stil={{ Höhe: Tabellenhöhe + 100 }} Klassenname='meineProjTabelle'> 
          <Tabs defaultActiveKey="1" onChange={this.handleTabsChange}> 
            <TabPane tab="Projektwinkel" key="1" style={{ backgroundColor: '#fff' }}> 
              <BenutzerdefinierteTabelle 
                Zeilenschlüssel = "Projekt-ID"
                Größe="klein"
                Stil={{ Höhe: Tabellenhöhe }}
                Spalten={Spalten}
                Tabellendaten = {projTableData}
                expandedRowRender={this.expandedRowRender}
                pagination={Seitennummerierung}
                handleTableChange={this.handleTableChange}
                scroll={{ y: TabellenScrollhöhe, x: 1660 }}
                tableRowSelection={diese.tableRowSelection}
              />
            </TabPane>
            <TabPane tab="Produktwinkel" key="2" style={{ backgroundColor: '#fff' }}>
              <BenutzerdefinierteTabelle
                Zeilenschlüssel = "Projekt-ID"
                Größe="klein"
                Stil={{ Höhe: Tabellenhöhe }}
                Spalten={SpaltenPrd}
                Tabellendaten = {prdTableData}
                handleTableChange={this.handleTableChange}
                pagination={Seitennummerierung}
                scroll={{ y: TabellenScrollhöhe, x: 1800 }}
                tableRowSelection={diese.tableRowSelection}
              />
            </TabPane>
          </Tabs>
        </div>

Dies ist das Ende dieses Artikels über das Wechseln von Antd-Tabs in React, das zu wiederholter Aktualisierung von Unterkomponenten führt. Weitere verwandte Inhalte zu wiederholter Aktualisierung von Antd-Tabs finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • React implementiert Beispielcode ähnlich dem Taobao-Tab-Center-Umschalteffekt
  • React-native Methode zum dynamischen Wechseln von Tab-Komponenten
  • Beispielcode zur Implementierung des Tab-Wechsels durch Übergeben von Ereignisparametern in einer React-Komponente
  • Verwenden Sie ReactJS, um Registerkartenwechsel, Menüleistenwechsel, Akkordeonwechsel und Fortschrittsbalkeneffekte zu implementieren
  • Problem beim Wechseln der Registerkarten für die Handschrift von React

<<:  Einführung in die Generierung von Kubernetes-Zertifikaten mit OpenSSL

>>:  Nginx-Beispielcode zur Implementierung dynamischer und statischer Trennung

Artikel empfehlen

Schreiben Sie ein MySQL-Datensicherungsskript mithilfe der Shell

Ideen Eigentlich ist es ganz einfach Schreiben Si...

So beheben Sie den Fehler "ERROR 1045 (28000)" beim Anmelden bei MySQL

Heute habe ich mich beim Server angemeldet und mi...

Zusammenfassung und Praxis des Javascript-Prototyp-Kettendiagramms

Inhaltsverzeichnis Prototypenkette Wir können ein...

Pull-Down-Aktualisierung und Pull-Up-Ladekomponenten basierend auf Vue-Kapselung

Basierend auf Vue und nativer JavaScript-Kapselun...

Detaillierte Erklärung zum Aktivieren des https-Dienstes in Apache unter Linux

Dieser Artikel beschreibt, wie man den https-Dien...

Linux verwendet stty zum Anzeigen und Ändern von Terminalzeileneinstellungen

Sttty ist ein gängiger Befehl zum Ändern und Druc...

Vue-Komponente kapselt Beispielcode zum Hochladen von Bildern und Videos

Laden Sie zuerst die Abhängigkeiten herunter: cnp...

JS implementiert Anforderungsdispatcher

Inhaltsverzeichnis Abstraktion und Wiederverwendu...

Websocket+Vuex implementiert eine Echtzeit-Chat-Software

Inhaltsverzeichnis Vorwort 1. Der Effekt ist wie ...

So führen Sie das React-Projekt auf dem offiziellen WeChat-Konto aus

Inhaltsverzeichnis 1. Verwenden Sie das „A“-Tag, ...

Detaillierte Erklärung zum Festlegen des Kontextpfads in der Webanwendung

URL: http://hostname.com/contextPath/servletPath/...