Reactjs 在“动态”选项卡面板上使用参照

我正在使用React、materialui和materialtable

我有一个可关闭的选项卡面板。当我更改选项卡时，我不会卸载相应的面板组件。我只是用css隐藏它。这意味着，当我在多个选项卡中使用“材质表”组件时，如果我想访问当前的表引用，我只会得到最近打开的选项卡面板中的表引用

当我保存选项卡时，如何更新ref以对应当前面板表

因为我认为我应该在标签更改事件中更新此参考。但是我怎么能做到呢？我使用功能组件和useRef

我试图使用useCallback，但运气不好

这是我的父组件：

const MainTabPanel = ({
  tabs,
  activeTab,
  setTabs,
  setActiveTab
}) => {

  const tableRef = useRef(null)

  const handleTabClose = (event, tabId) => {
    event.stopPropagation()
    const activeTabIndex = tabs.length > 1 ? tabs.length - 2 : 0
    setActiveTab(activeTabIndex)
    setTabs([
      ...tabs.filter(tab => tab.id !== tabId)
    ])
  }

  const handleTabChange = (event, newValue) => {
    setActiveTab(newValue)
  }

  return (
    <div>
      <TabsToolbar
        tabs={tabs}
        open={open}
        activeTab={activeTab}
        onTabClose={handleTabClose}
        onTabChange={handleTabChange}
      />
      <TableRefProvider value={tableRef}>
        {tabs.map(({ component: Component, id }, index) => (
            <Panel value={activeTab} index={index} key={id} padding={2}>
              <Component />
            </Panel>
          )
        )}
      </TableRefProvider>

    </div>
  )
}

export default MainTabPanel

const MainTabPanel=({
标签，
activeTab，
设置选项卡，
setActiveTab
}) => {
const tableRef=useRef（空）
const handleTabClose=（事件，选项卡）=>{
event.stopPropagation（）
常量activeTabIndex=tabs.length>1？tabs.length-2:0
setActiveTab（activeTabIndex）
设置选项卡([
…tabs.filter（tab=>tab.id！==tabId）
])
}
const handleTabChange=（事件，newValue）=>{
setActiveTab（新值）
}
返回(
{tabs.map（{component:component，id}，index）=>(
)
)}
)
}
导出默认主选项卡面板

您可以尝试卸载该表，并使用给定的选定选项卡作为组件的键，将ref设置为新表

这将强制在键/选项卡更改时重新加载组件，并重置tableRef

另一方面，为什么不卸载，而是用css隐藏它