Reactコンポーネントの静的データ/状態の設定

Question

new ResizeObserverへの参照と、componentDidMountライフサイクルメソッドのDOM要素への参照を設定したいと考えています。 componentWillUnmountでアクセスできるようにこれらの参照が必要なので、現在はReactコンポーネント自体に設定しています（this経由）。

しかし、TypescriptはReactコンポーネントのプロパティroとelを認識しないため、Typescriptでは問題があります。さらに、これを行うことが最善の方法であるかどうかは私には分かりません。これは良いコンベンションですか、それとも静的データを設定するためのよりよい方法ですか？

public componentWillUnmount() { 
    this.ro.unobserve(this.el); 
} 

public componentDidMount() { 
    this.el = ReactDOM.findDOMNode(this.refs.el); 
    this.ro = new ResizeObserver((entries) => { 
     for (let entry of entries) { 
      // set state 
     } 
    }); 

    this.ro.observe(this.el); 
} 

Answer 1

あなたは、これはあなたのコンポーネントのクラスでroとelなどのオプションのプロパティを宣言することによって、入力された取得することができます。ただ、彼らはコンストラクタで設定されていないとして、彼らはオプションなので、あなたがそれらを使用する各場所に（余計な）存在チェックを追加する必要があります

private ro? : ResizeObserver 
private el? : Element 

を追加します。例えば：

if (this.ro && this.el) { 
    this.ro.unobserve(this.el); 
} 

それらがcomponentDidMountに初期化されているので、どちらも常にcomponentWillUnmountに存在していますが、それはあなたが活字体で表現することができるものではありません。