在组件上触发"调整大小"事件？

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并使其可以访问 onResize

Answer 1

另一个 NPM 库，用于侦听 div 的调整大小事件。检查演示