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 обратного вызова onLinkClick, как в здесь . Он вернет вас обратно PivotItem. Если вы установите опору itemKey для каждого PivotItem, вы сможете точно узнать, какая вкладка будет отображаться, а затем решить, какой конкретный вызов сделать на основе этого идентификатора. Вы можете увидеть пример этого здесь .

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