在組件上觸發“調整大小”事件？

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" />