React Fabric UI Pivot размонтирует компонент при изменении PivotItem

Question

Я использую компонент Pivot из FabricUI, но я застрял, потому что у меня есть несколько PivotItems, и у каждого PivotItem есть дочерний компонент, который взаимодействует с сервером при подключении. Каждый раз, когда я меняю элемент сводки, текущий компонент get отключается, а новый монтируется.

<Pivot>
    <PivotItem linkText='One' itemKey='0'>
       <GridDataOne/>  
    </PivotItem>

    <PivotItem linkText='Two' itemKey='1'>
        <GridDataTwo/>  
    </PivotItem>
</Pivot>

class GridDataTwo extends React.Component<any,any> {
   ...
   componentDidMount() {
       fetchDataFromServer()...
   }
}

Как я могу избежать такого поведения? Можно ли скрывать неактивные элементы, а не размонтировать их?

Спасибо.

Answer 1

Одним из решений было бы сделать звонок на сервер из Pivot"s onLinkClick обратный вызов, как здесь. Это передаст вас обратно PivotItem, Если вы установите itemKey опора на каждого PivotItem Затем вы можете точно знать, какая вкладка будет отображаться, а затем решить, какой конкретный вызов сделать на основе этого идентификатора. Вы можете увидеть пример этого здесь.

К сожалению, нет способа скрыть невыбранные вкладки, поскольку это будет означать, что они все загружены на страницу и кто знает, сколько их там и насколько они тяжелые.