React Loadable не обновляется при обновлении браузера - PullRequest
Новая
       21

React Loadable не обновляется при обновлении браузера

0 голосов
/ 30 января 2019

У меня есть слайд, который отображает кучу карт с некоторой информацией.Высота карт зависит от высоты самой высокой карты.Я использую react-slick для моего слайдера.На первом рендере все карты установлены на одну высоту, но когда я обновляю браузер, карты имеют разную высоту.

Мой код выглядит следующим образом

Slider.jsx 

import Loadable from 'react-loadable';
.....


const Slider = Loadable({
    loader: () => import('react-slick'),
    loading: () => null,
  });

class Slider extends Component{
   constructor(){
     this.state={ height: 0 }
     this.cards = [];
   }

   componentDidMount(){
      const height = this.getHighestHeight(this.cards);
      this.setState({height});
   }

   getHighestHeight(cards){
    //calculates the highest height of the cards
    ......
   }

   render(){
     ...
     <Slider ...>
       <Cards height={this.state.height} />
     </Slider>
     ....
   }

}

Я понимаю, что Loadable является асинхронным компонентом, может быть, поэтомуне установить высоту при обновлении браузера

Ответы [ 2 ]

0 голосов
/ 08 февраля 2019

Вы дважды определили Slider.

Переименуйте загружаемый слайдер во что-то другое 

const LoadableSlider = Loadable({
    loader: () => import('react-slick'),
    loading: () => null,
});

Затем в рендере: 

<LoadableSlider>
  <Cards height={this.state.height} />
</LoadableSlider>

Проверьте, решает ли этоваша проблема.

0 голосов
/ 08 февраля 2019

Возможно, вы тестируете высоту изображений, которые еще не имеют высоты.componentDidMount () означает, что компоненты отображались так же, как в тегах <img .. />, но не обязательно загружались.В вашем getHighestHeight fx попробуйте проверить, загружен ли он , затем проверьте его высоту.

...