react day23:React入門9
2020-12-22
# diarytwitterAPIの承認がまだ下りていないので、画像を良い感じに並べるロジックを書いていた。
良い感じ。
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をどれくらい分離させるかなど、中々考えるところが多い。