我有一张幻灯片,可以呈现一堆包含一些信息的卡片。卡片高度基于最高卡片的高度。我正在为我的 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 是异步组件,这可能是它没有在浏览器刷新时设置高度的原因
最佳答案
您可能正在测试还没有高度的图像的高度。 componentDidMount() 表示组件已呈现为 <img .. />
标签已呈现但不一定已加载。在您的 getHighestHeight fx 中,try checking if it's loaded然后测试它的高度。
关于javascript - React Loadable 不会在浏览器刷新时更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54443179/