瀏覽器刷新時React Loadable不會更新

Question

我有一張幻燈片，可以提供一堆信息。 卡片高度基於最高卡片的高度。 我正在為我的滑塊使用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是異步組件，這可能是它沒有設置瀏覽器刷新高度的原因

Answer 1

您可能正在測試沒有高度的圖像的高度。 componentDidMount（）表示組件已渲染，如<img .. />標記已呈現但未必加載。 在你的getHighestHeight fx中， 嘗試檢查它是否已加載然后測試它的高度。

Answer 2

Slider定義了兩次。

將可加載滑塊重命名為其他內容

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

然后在渲染：

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

看看是否能解決您的問題。