Setzen Sie statische Daten/Zustand auf React Component

Question

Ich bin auf der Suche nach Referenzen auf eine new ResizeObserver und ein DOM-Element in meiner componentDidMount Lebenszyklus-Methode. Ich brauche diese Referenzen inzugänglich zu sein, also setze ich sie derzeit auf der React-Komponente selbst (über this).

Dies ist jedoch problematisch mit Typescript, da Typescript die Eigenschaften ro und el auf meiner React-Komponente nicht erkennt. Außerdem bin ich mir nicht einmal sicher, ob dies der beste Weg ist, dies zu tun. Ist das eine gute Konvention oder gibt es bessere Möglichkeiten, statische Daten zu setzen?

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

Sie können diese eingegeben erhalten, indem die ro und el als optionale Eigenschaften in Ihrer Komponente Klasse deklarieren.

Fügen Sie einfach

private ro? : ResizeObserver 
private el? : Element 

Sie optional sind, wie sie im Konstruktor nicht gesetzt, so dass Sie eine (überflüssige) Existenzprüfung an jedem Ort muss hinzufügen, wo Sie sie verwenden. Z.B .:

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

Beide werden immer existieren in componentWillUnmount, weil sie in componentDidMount initialisiert sind, aber das ist nicht etwas, das man in Typoskript zum Ausdruck bringen können.