javascript - React Loadable 不会在浏览器刷新时更新

Question

我有一张幻灯片，可以呈现一堆包含一些信息的卡片。卡片高度基于最高卡片的高度。我正在为我的 slider 使用 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 中，try checking if it's loaded然后测试它的高度。