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

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 的调整大小事件。 检查演示

Answer 2

我使用了这篇文章并简单地将其转换为 React 组件。 您需要做的就是在 componentDidMount 中定义一个 MutationObserver 以便它可以监视调整大小

 class ResizableDiv extends React.Component { constructor(props) { super(props); this.ref = React.createRef(); } componentDidMount() { const element = this.ref.current; element.addEventListener('resize', (event) => console.log(event.detail)); function checkResize(mutations) { const el = mutations[0].target; const w = el.clientWidth; const h = el.clientHeight; const isChange = mutations .map((m) => `${m.oldValue}`) .some((prev) => prev.indexOf(`width: ${w}px`) === -1 || prev.indexOf(`height: ${h}px`) === -1); if (!isChange) { return; } const event = new CustomEvent('resize', { detail: { width: w, height: h } }); el.dispatchEvent(event); } const observer = new MutationObserver(checkResize); observer.observe(element, { attributes: true, attributeOldValue: true, attributeFilter: ['style'] }); } render() { return ( <div ref={this.ref} className='drag'> Resize me! < /div>); } } ReactDOM.render( < ResizableDiv / > , document.getElementById('root') );

 .drag { border: 1px solid red; width: 200px; height: 100px; resize: both; overflow: hidden; }

 <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script> <div id="root" />