Реагировать на ссылки на динамической панели c - PullRequest
Новая
       13

Реагировать на ссылки на динамической панели c

0 голосов
/ 23 января 2020

Я использую React, material-ui и material-table.

У меня есть закрываемая панель вкладок. И когда я меняю вкладки, я не отключаю соответствующий компонент панели. Я просто скрываю это с css. Это означает, что когда я использую свой компонент таблицы материалов внутри нескольких вкладок и хочу получить доступ к текущей ссылке на таблицу, я просто получаю ссылку на таблицу, которая находится внутри недавно открытой панели вкладок.

Как мне обновить Ссылка соответствует текущей таблице панелей, когда я могу изменить вкладку?

Как я думаю, я должен обновить эту ссылку на событие изменения вкладки. Но как я могу это сделать? Я использую функциональные компоненты и 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

1 Ответ

0 голосов
/ 02 февраля 2020

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

Это приведет к повторному отображению компонента при изменении ключа / вкладки и сбросит tableRef.

На заметку, почему вы не размонтируете, а спрячете ее с помощью css?

...