各反応クラスのウィンドウ次元を提供する方法

Question

私はいくつかの反応クラスとコンポーネントを持つ反応プロジェクトを持っています。これらのほとんどでは、ウィンドウのサイズ変更イベントが発生し、新しいウィンドウのサイズが必要になります。私は、各コンポーネントにウィンドウイベントリスナーを必要としません。どのようにしてディメンションを提供し、他のすべてのコンポーネントからアクセス可能なutil-classを書くことができますか？

updateDimension: function() { 
    const height= window.innerHeight; 

    this.setState({ 
     height: height, 
    }); 
    this.forceUpdate(); 
}, 

Answer 1

オプション

あなたはES6使用している場合、これは非常に簡単です：

は、別のJavaScriptファイル内のutilの関数を定義します。 '../path/to/utils/updateDimension'：その後、

export function updateDimension(Component) { 
    this.setState({ 
     height: window.innerHeight, 
    }); 
} 

そして、このようなあなたのコンポーネントでそれを使用する：@updateDimensionは種類のクラスを拡張するYourComponentを言っている

import { updateDimension } from '../path/to/utils/updateDimension'; 

@updateDimension export class YourCompoennt extends React.Component { 
    // ... 
} 

そのupdateDimension関数によって呼び出されます。

オプションB

もう一つの方法は、高次のコンポーネントを利用するには、次のようになります。あなたのコンポーネントのコールのそれぞれの下部に続いて

import React from 'react'; 

export function updateDimension(WrappedComponent) { 
    return class Dimensions extends React.Component { 
    updateDimension() { 
     this.setState({ 
     height: window.innerHeight, 
     }); 
    } 

    render() { 
     return <WrappedComponent {...this.props}/> 
    } 
    } 
} 

：

は、このようなあなたのutilの定義：

export default updateDimension(YourComponent)(); 

Answer 2

これには、Higher Order Componentをコード化することをおすすめします。現在のウィンドウサイズを子供に渡すことができます。例えば、：viewState = "xs"

さらに、正規のJSユーティリティ関数/クラスを使用するか、またはサイズをcontextに格納することができますが、HOCがこれを行う最もエレガントな方法です。