Comment empêcher React de décharger le contenu de l'onglet précédent dans Réaction UI sémantique?

Question

Dire que j'ai dans mon application:

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 

Chaque fois que l'onglet est activé, il est renoué avec à partir de zéro et je suis en train de perdre tous les changements à l'intérieur de l'onglet que je suis passé de si j'y retourne.

Quelle est la cause de cela et comment je peux garder le contenu modifié des onglets que je change?

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

Answer 1

L'état est perdu parce que la fonction render est appelée sur chaque commutateur de Tab et produit de nouveaux objets. Il était à l'origine fait pour les tâches de performance. Cependant, si vous utiliserez Redux ou similaire, vous n'aurez pas ce problème.

0.72.0 introduit renderActiveOnly prop, il existe des exemples d'utilisation: simple et shorthand. Vous pouvez le définir à false et tous les onglets seront rendus.