Реагировать на вкладки Lazy Load - PullRequest
Новая
       21

Реагировать на вкладки Lazy Load

0 голосов
/ 22 марта 2019

Я новичок в React из jquery. Допустим, у меня есть три вкладки. Я ищу способ ленивой загрузки содержимого 3 вкладок, чтобы при первом нажатии на Tab1 загружалось только содержимое tab1 и оставалось в DOM (не содержимое tab2 и tab3). Когда я нажимаю Tab2, содержимое tab2 будет загружено (не содержимое tab3). Когда я снова нажму Tab1, исходное содержимое tab1 останется в DOM без перезагрузки и повторного рендеринга.

Это код: 

<div className="tab-content">
  {/* Tab1 */}
  <div hidden={tab1.name !== activeTab ? true : false}>
    <tab1.component />
  </div>
  {/* Tab2 */}
  <div hidden={tab2.name !== activeTab ? true : false}>
    <tab2.component />
  </div>
  {/* Tab3 */}
  <div hidden={tab3.name !== activeTab ? true : false}>
    <tab3.component />
  </div>
</div>

Это работает, но проблема в том, что все три компонента (tab1.component, tab2.component & tab3.component) были загружены одновременно, даже пользователь никогда не нажимает tab2 или tab3, что приводит к потере обработки на сервере .

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

Спасибо.

...