Ereignis 'Größe ändern' auf Komponente auslösen?

Question

Ich schreibe einen Komponentendekorator, der erkennen kann, wenn die Größe eines DOM-Elements geändert wird (durch CSS, Javascript, Fenstergröße usw.).

Es funktioniert bereits perfekt, ich versuche jetzt, seine API einfach zu bedienen, also, was ist einfacher als das?

class Foobar extends React.Component { 
    render() { 
    return <div onResize={() => console.log('resized!')}>Foobar</div>; 
    } 
} 
ReactDOM.render(resizeAware(Foobar), app); 

Das Problem, das ich mit Blick auf bin ist, dass das onResize Ereignis nicht ausgelöst wird, wenn ich es auslösen ...

Dies sind zwei Versuche, das Ereignis auszulösen:

// method 1 
onResize() { 
    const resizeEvent = document.createEvent('HTMLEvents'); 
    resizeEvent.initEvent('resize', true, true); 
    console.log('triggering resize...'); 
    findDOMNode(this.componentNode).dispatchEvent(resizeEvent); 
} 

// method 2 
onResize() { 
    console.log('triggering resize...'); 
    findDOMNode(this.componentNode).dispatchEvent(new Event('resize')); 
} 

Wenn ich auf die Veranstaltung höre mit:

findDOMNode(this).addEventListener('resize',() => console.log('resized')); 

Alles funktioniert. Es scheint also so, dass das Ereignis, das ich absende, vom realen DOM-Element und nicht vom virtuellen DOM empfangen wird. Die Frage ist nun, warum der onResize Callback nicht aufgerufen wird?
Wenn es keine Lösung gibt, wie würden Sie meine Decorator API zur Verfügung stellen?

NB: Ich will nicht eine Möglichkeit, die Größe ändern der Komponente zu erkennen, ich muss nur ein Ereignis versenden zu reagieren und zugänglich zu machen mit onResize

Answer 1

Another NPM lib hört bei einem div zu ändern. Überprüfen Sie die demo