reactjs - 未使用 react-grid-layout 调用 onResizeStop

Question

我注意到在我的代码中，仅当响应式网格布局组件是我的 App 组件的直接子组件时才会调用 onResizeStop 回调。

请有人能解释一下为什么在我调整地图或列出 div 的大小时不调用 onResizeStop 吗？- 我是反应和 ES6 的新手。谢谢

import React, { Component } from 'react';
import './App.css';
import 'react-grid-layout/css/styles.css'
import 'react-resizable/css/styles.css'
import {Responsive} from 'react-grid-layout';



class MainGridLayout extends Component{
    render=()=> {
        return  ( 
          <Responsive  className="layout"   
             width={1000}
              breakpoints={{lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}}
              cols={{lg: 12, md: 10, sm: 6, xs: 4, xxs: 2}}
              onResizeStop={this.onGridLayoutResizeStop}
           > 
           <div key={'map'} className="main-grid-cell"  data-grid={{w: 10, h: 4, x: 0, y: 0}} >a</div>
           <div key={'list'} className="main-grid-cell" data-grid={{w: 2, h:6, x: 10, y: 0}}>b</div>
           </Responsive>
        )
    }

    onGridLayoutResizeStop=()=>()=>{
        console.log("MainGridLayout.onGridLayoutResizeStop()");     
    }
}



class App extends Component {
    constructor(props){   
        console.log("constructor(...) ");
        super(props);       
    }

    // case that does not work: the Responsive grid layout is embedded inside a child of the App           
    render_NOT_WORKING=()=> {
        return (
            <MainGridLayout />          
        );
    }
    // case that work: the Responsive grid layout is a direct child of the App
    render_WORKING=()=> {
        return  ( 
          <Responsive  className="layout"   
              width={1000}
              breakpoints={{lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}}
              cols={{lg: 12, md: 10, sm: 6, xs: 4, xxs: 2}}
              onResizeStop={this.onGridLayoutResizeStop}
           > 
           <div key={'map'} className="main-grid-cell"  data-grid={{w: 10, h: 4, x: 0, y: 0}} >a</div>
           <div key={'list'} className="main-grid-cell" data-grid={{w: 2, h:6, x: 10, y: 0}}>b</div>
           </Responsive>        
        );
    }

    render=()=>{
        return this.render_NOT_WORKING();
    }


    onGridLayoutResizeStop=()=>{
        console.log("App.onGridLayoutResizeStop()");        
    }


}
export default App;