reactjs - React Fabric UI Pivot 在 PivotItem 更改时卸载组件

Question

我正在使用 FabricUI 中的 Pivot 组件，但我被卡住了，因为我有几个 PivotItem，并且每个 PivotItem 都有一个子组件，它在安装时与服务器通信。每次我更改枢轴项目时，都会卸载当前组件并安装一个新组件。

<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回调中调用服务器。它会传给你。如果你在每一个上设置了 prop，你就可以确切地知道要渲染哪个选项卡，然后根据该 id 决定要进行什么特定调用。你可以在这里看到一个例子。PivotItemitemKeyPivotItem

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