動的ビューポートの高さのためのReactJSのJQuery関数

Question

したがって、テーブルの高さをビューポートの高さに等しくすることについて、別の質問で助けがありました。つまり、ユーザーが画面のサイズを変更した場合、テーブルの高さは画面の高さ全体を占めるようにオンザフライで調整されます。私の問題は今、これはReact Appであり、このjquery関数をReactに変換するのは苦労しています。

My機能は次のようになります。ここでは

$(document).ready(function() { 
    function setHeight() { 
    windowHeight = $(window).innerHeight(); 
    $('.dynamicHeight').css('height', windowHeight + 'px'); 
    }; 
    setHeight(); 

    $(window).resize(function() { 
    setHeight(); 
    }); 
}); 

が行動

を示すcodepenであり、ここで私が

どのようにすることができますを行うにしようとしています何のスクリーンショットでありますこの関数をReactでビルドしますか？私はそれがいくつかの変更を必要とすると仮定しています。事前

NOTEで

ありがとう：これは私が作った別の質問のように見えるかもしれないが、それは重複しません。それは同じ問題に関連する全く異なる質問です。

Answer 1

コンポーネントのライフサイクルでは、componentDidMountメソッドを追加する必要があります。その方法では、単にあなたのコンポーネントを初期化するとき、あなたは（jQueryのを使用）、ビューポートの幅と高さに状態を設定リサイズハンドラが何であるか、これはありませんので、

import React, { Component } from 'react'; 

class MyComponent extends Component { 
    constructor(props){ 
     super(props); 
     this.state = { 
      width: $(window).width(), 
      height: $(window).height(), 
     } 
     this.resize = this.resize.bind(this); 
    } 
    resize(){ 
     this.setState(() => { 
      return { 
       width: $(window).width(), 
       height: $(window).height() 
      } 
     }); 
    } 
    componentDidMount(){ 
     window.addEventListener('resize', this.resize); 
    } 
    render(){ 
     return (
      <div> 
       <MyComponent width={this.state.width} height={this.state.height} /> 
      </div> 
     ) 
    } 
} 

を、追加します。次に、状態を更新するメソッドを定義し、コンポーネントがマウントされたときにresizeイベントリスナーをアタッチし、画面のサイズが変更されるたびにresizeメソッドを呼び出します。これにより、ビューポートの幅と高さが常に状態に含まれます。次に、その状態を小道具やブームとしてコンポーネントに渡すことによって、コンポーネントの幅と高さを定義することができます。スクリーンのサイズを変更するたびに、コンポーネントはそれに合っています。

質問がありましたらお知らせください。 （ライフサイクルイベントは必要なだけ頻繁に状態を更新しないかもしれません）私はちょうどそれをホイップしてテストしませんでしたが、理論的にはこれがまさにあなたが必要とするものです

編集：ちょっと考えて、コンポーネントのスタイルを変更したい場合は、スタイルオブジェクトを使用します。だから、子コンポーネントには、このような何か：

let style = { 
    width: this.props.width + 'px', 
    height: this.props.height + 'px' 
} 

そして、あなたはそのコンポーネントをレンダリング

<ChildComponent style={style} />