javascript - 在组件上触发 'resize' 事件？

Question

我正在编写一个组件装饰器，它能够检测何时更改 DOM 元素的大小(通过 css、javascript、窗口大小调整等)。

它已经完美地工作了，我现在正在努力使其 API 易于使用，那么，还有什么比这更容易的呢？

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

我面临的问题是 onResize 事件在我触发时没有被触发...

这是触发事件的两次尝试:

// 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'));
}

如果我监听事件:

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

一切正常。所以我发送的事件似乎是由真实的 DOM 元素接收的，而不是由虚拟 DOM 接收的。

现在的问题是，为什么onResize回调没有被调用？
如果没有解决方案，您将如何使我的装饰器 API 可用？

注意:我不需要检测组件大小调整的方法，我只需要向 React 分派(dispatch)一个事件并使其可通过 onResize

访问

Answer 1

Another NPM lib收听 div 的调整大小事件。检查demo