5

我有一张幻灯片，它呈现了一堆带有一些信息的卡片。卡片高度基于最高卡片的高度。我正在使用react-slick我的滑块。在第一次渲染时，卡片都设置为一个高度，但是当我刷新浏览器时，卡片的高度不同。

我的代码如下

滑块.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 是异步组件，这可能是它没有在浏览器刷新时设置高度的原因

4

2 回答 2

0

您可能正在测试还没有高度的图像的高度。componentDidMount() 表示组件已呈现为<img .. />标签已呈现但不一定已加载。在您的 getHighestHeight fx 中，尝试检查它是否已加载，然后测试它的高度。

于 2019-02-07T23:12:10.247 回答
0

你已经Slider定义了两次。

将可加载滑块重命名为其他名称

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

然后在渲染中：

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

看看能不能解决你的问题。

于 2019-02-08T19:41:33.927 回答