reactでウィンドウサイズの取得

Question

jqueryは理解しているのですがreactはまだ始めてばかりで質問です。

reactのコンポーネントでウィンドウサイズや高さを
resizeなどで取得してその値をdivなどに設定するやり方は
どのように行うのでしょうか？（そもそも可能・・・？）

できればjqueryはつかわず行いたいです。

ざっくりとして申し訳ありませんが、
ご教授のほどよろしくお願いいたします。

例：参考子コンポーネント たとえば下記のカードをウィンドウの中央に常に位置させるなど（cssだけでもできますがそれは今回置いておいて）

import React from 'react';
import theme from './Card.css';

const Card = (props) => (
	<div className={theme.card}>
		<div className={theme.col}>
           ああああ
		</div>
	</div>
);

export default Card;

Answer 1

ComponentのComponentWillMountの中に
window.onresizeのEventを追加したら？

例えば、

class App extends Component {
        constructor(props) {
                super(props);
        }
        getWindowSize() {
                var w = window,
                d = document,
                e = d.documentElement,
                g = d.getElementsByTagName('body')[0],
                w = w.innerWidth || e.clientWidth || g.clientWidth,
                h = w.innerHeight|| e.clientHeight|| g.clientHeight;
                
                return {
                        width: w,
                        height: h
                }
        }
        componentWillMount () {
                window.addEventListener('resize', () => {
                        var size = this.getWindowSize() 
                        console.log('your window size', size)
                })
        }
        render() { ... }
}

Comments

[cheche0830]

ありがとうございます！
試してみます！