Wie verhindere ich, dass React den Inhalt der vorherigen Registerkarte in Semantic UI React entlädt?

Question

sagen, ich habe dies in meiner App:

import React from 'react' 
import { Tab } from 'semantic-ui-react' 

const panes = [ 
    { menuItem: 'Tab 1', render:() => <Tab.Pane>Tab 1 Content</Tab.Pane> }, 
    { menuItem: 'Tab 2', render:() => <Tab.Pane>Tab 2 Content</Tab.Pane> }, 
    { menuItem: 'Tab 3', render:() => <Tab.Pane>Tab 3 Content</Tab.Pane> }, 
] 

const TabExampleBasic =() => (
    <Tab panes={panes} /> 
) 

export default TabExampleBasic 

Jedes Mal, wenn die Lasche eingeschaltet wird, wird es von Grund auf neu geladen wird, und ich alle Änderungen innerhalb der Registerkarte verliere, die ich von schaltet, wenn ich zu ihm zurückkehren.

Was verursacht dies und wie kann ich den geänderten Inhalt der Tabs beibehalten, von denen ich wechsle?

Tab docs: https://react.semantic-ui.com/modules/tab#tab-example-basic

Answer 1

Der Staat verloren, weil render Funktion auf jedem Schalter von Tab aufgerufen und neue Objekte erzeugt. Es wurde ursprünglich für Leistungsaufgaben erstellt. Wenn Sie jedoch Redux oder ähnliches verwenden, haben Sie dieses Problem nicht.

0.72.0 eingeführt renderActiveOnly prop, gibt es Beispiele für die Verwendung: simple und . Sie können es auf false setzen und alle Registerkarten werden gerendert.