hukurouo.com 🦉

2020-12-22 :

react day23：React入門9


twitterAPIの承認がまだ下りていないので、画像を良い感じに並べるロジックを書いていた。

良い感じ。

windowの幅でレーン数を決めて、画像の高さを考慮しつつ各レーンの配列に画像データをpushしていく、ということをやろうとしている。

window幅をバインドさせるやつはこう書いてみた。

  constructor(props: any) {
    super(props);
    this.state = {width: window.innerWidth};
  }
  componentWillMount () {
    window.addEventListener('resize', () => {
      this.setState({width: window.innerWidth})
    })
  }

画像URLから、その画像サイズを取得するコードはこんな感じ

    image_urls.forEach((image_url) => {
      const img = new Image();
      img.src = image_url; 
      imageHeightList.push({url: item, height: img.height})
    });

どこにステート持たせるかとか、componentsをどれくらい分離させるかなど、中々考えるところが多い。