Блог

У меня есть компонент, который отображает Tabs компонент из Material UI 5.0.0-beta.5

Есть случай, когда я установил для отображения этих компонентов значение «нет».

Но затем я получаю эту ошибку —

Material-UI: The value provided to the Tabs component is invalid. The Tab with this value ( 0 ) is not part of the document layout. Make sure the tab item is present in the document or that it's not display none.

Я понимаю ошибку, и я устанавливаю ее отображение на нет, потому что, но я хочу показать и скрыть компонент без повторного рендеринга (потому что я хочу, чтобы выбор пользователя сохранялся).

Есть ли способ исправить эту ошибку или, может быть, лучший способ сделать то, что я пытаюсь сделать?

Вы могли бы попробовать использовать visibility: hidden вместо этого

И если вы не хотите занимать место для скрытого компонента, установите его ширину и высоту равными 0, а затем измените их позже, чтобы отобразить пользовательский интерфейс.

 visibility: hidden;
width: 0;
height: 0;
 

И когда вы захотите показать его обратно:

 visibility: visible;
width: 100%;
height: 100%;
 

Вместо того, чтобы обманывать CSS, как насчет этого?

 export default function TabsContainer() {
  const [selectedTab, setSelectedTab] = React.useState(0);

  const handleChange = (event, newTab) => {
    setSelectedTab(newTab);
  };

  const hideTabs = true; // use state or sth

  return (
    <Grid>
      {!hideTabs amp;amp; (<Tabs
        value={selectedTab}
        onChange={handleChange}
        indicatorColor="primary"
        textColor="primary"
        centered
      >
        <Tab label="Item One" />
        <Tab label="Item Two" />
        <Tab label="Item Three" />
      </Tabs>)
     }
    </Grid>
  );
}
 

Вы боитесь, что выбранное состояние будет потеряно, но этого не произойдет, потому что государство живет в TabsContainer .