5

いくつかの情報を含む一連のカードをレンダリングするスライドがあります。カードの高さは、最も高いカードの高さに基づいています。react-slickスライダーに使用しています。最初のレンダリングでは、カードはすべて 1 つの高さに設定されていますが、ブラウザーを更新すると、カードの高さが同じではありません。

私のコードは次のとおりです

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 は非同期コンポーネントであることを理解しています。それがブラウザの更新時に高さを設定しない理由である可能性があります

4

2 に答える 2

0

高さのない画像の高さをテストしている可能性があります。componentDidMount() は、コンポーネントが<img .. />タグのようにレンダリングされたが、必ずしもロードされていないことを意味します。getHighestHeight fx で、ロードされているかどうかを確認してから、高さをテストします。

于 2019-02-07T23:12:10.247 に答える
0

Slider2 回定義しました。

ローダブルスライダーの名前を別の名前に変更します

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

次にレンダリングします。

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

問題が解決するかどうかを確認してください。

于 2019-02-08T19:41:33.927 に答える