Reactjs материал интерфейса предотвращает повторное отображение вкладок

Question

Я создал пользовательский интерфейс на основе материала с вкладками в reactJS. Каждый раз, когда выбирается вкладка, содержимое этой вкладки перезагружается, что вызывает серьезную проблему с производительностью, поскольку я отображаю iFrame под одной из этих вкладок. Я попытался использовать React.memo, чтобы гарантировать, что экран не рендерится повторно, потому что в реквизитах нет изменений, но это все равно происходит.

Вот код -

Ссылка песочницы кода

Есть ли способ, что после первой загрузки iFrame я переключаюсь? между вкладками iframe не перерисовывается снова?

Answer 1

Вы проверяете, равняется ли value текущей вкладки index текущей вкладки, и только если они равны, вы отображаете содержимое.
Вместо этого - просто сохраняйте содержимое и управляйте компонентом Typography. видимость его контента (который у вас уже есть, используя hidden внутри компонента Typography.

<Typography
  component="div"
  role="tabpanel"
  hidden={value !== index}
  id={`simple-tabpanel-${index}`}
  aria-labelledby={`simple-tab-${index}`}
  {...other}
>
  {<Box p={3}>{children}</Box>}
</Typography>

Обратите внимание, что контент будет отображаться, так что если у вас много содержимое внутри / запросы к бэкэнду / et c - все это будет частью вашей DOM, даже если вы их не видите.