React Fabric UI Pivot unmounts component on PivotItem change

问题

I'm using a Pivot component from FabricUI but I'm stuck because I have several PivotItems and every PivotItem has a child component that talks to the server when it's mounted. Every time I change a pivot item, current component get's unmounted and a new one is mounted.

<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()...
   }
}

How can I avoid this kind of behaviour? Is it possible to hide unactive pivot items rather then unmounting it?

回答1:

One solution would be to make the call to the server from the Pivot's onLinkClick callback as in here. It will pass you back the PivotItem. If you set the itemKey prop on each PivotItem you can then know exactly what tab is about to render and then decide what specific call to make based on that id. You can see an example of that here.

Unfortunately, there is no way to hide the unselected tabs as this would mean having them all loaded on the page and who knows how many of them are there and how heavy they are.

来源：https://stackoverflow.com/questions/54136479/react-fabric-ui-pivot-unmounts-component-on-pivotitem-change