Korrekte Möglichkeit, in React ComponentDidMount Referenzen zu erhalten und Ereignislistener anzuhängen.

Question

Das Problem ist grob in den Kommentaren im Code-Snippet zusammengefasst. Wenn ich this._setSize in constructor binde, weiß es nie über this.container - auch wenn in componentDidMount aufgerufen. Was mache ich falsch? Vielen Dank!

export default class MyComponent extends React.Component { 
 
    constructor() { 
 
    super() 
 
    this._setSize = this._setSize.bind(this) 
 
    } 
 

 
    componentDidMount() { 
 
    const container = this.container // <div></div> :) 
 
    this._setSize() 
 
    window.addEventListener('resize', this._setSize) 
 
    } 
 

 
    componentWillUnmount() { 
 
    window.addEventListener('resize', this._setSize) 
 
    } 
 

 
    _setSize() { 
 
    const container = this.container // undefined :(
 
    const containerSize = { 
 
     x: container.offsetWidth, 
 
     y: container.offsetHeight 
 
    } 
 
    this.setState({ containerSize }) 
 
    } 
 

 
    render() { 
 
    return (
 
     <div ref={node => this.container = node}> 
 
     </div> 
 
    ) 
 
    } 
 
}

Answer 1

Innerhalb jeder Wieder machen Sie erstellen und neue Instanz der Funktion zum Einrichten Behälter ref übergeben. Die vorherige Funktion wird dann mit null aufgerufen. Daher kann es passieren, dass Sie versehentlich gesetzt this.container zu null:

<div ref={node => this.container = node}> 

Wenn Sie hier Komponenteninstanz Methode übergeben statt Inline-Funktion, es einmal mit Bezug und zweiten Mal mit null während Komponente Aushänge genannt wird. Z.B .:

// dont forget to bind it in constructor 
onContainerRef (node) { 
    // furthermore you can even check if node is not null 
    // if (node) { ... 
    this.container = node 
} 

// ... in render 
<div ref={this.onContainerRef}> 

Mehr erfahren Sie in docs lesen.

Answer 2

ich Ihren Code festgelegt und es funktioniert jetzt: see working DEMO

Was war das Problem?

componentWillUnmount() { 
    window.addEventListener('resize', this._setSize) 
} 

Sie haben keine Event-Listener von window entfernen, weil in componentWillUnmount Sie addEventListener statt removeEventListener haben. Wenn Sie ein bedingtes Rendering der Komponente haben, wird unter resize auch das Ereignis _setSize aufgerufen.

um dieses Problem zu veranschaulichen, mit der gebrochenen Demo spielen und klicken Sie auf Toggle Taste und schaut am Ausgang: see broken DEMO