更改PivotItem时，React Fabric UI Pivot卸载组件

Question

我使用的是FabricUI中的Pivot组件，但由于我有几个PivotItems而每个应用程序都具有一个子组件，因此在安装服务器时，该子组件会与服务器通信。每次更改枢轴项目时，都会卸载当前组件，并安装一个新组件。

<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

一种解决方案是像here中那样，从Pivot的{​​{1}}回调向服务器进行调用。它将把您传回onLinkClick。如果在每个PivotItem上设置了itemKey道具，则可以确切知道要渲染的选项卡，然后根据该ID决定要进行的特定调用。您可以看到该here的示例。

不幸的是，无法隐藏未选择的选项卡，因为这将意味着将它们全部加载到页面上，并且谁知道其中有多少以及它们有多沉重。