使用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;