reactjs - onResizeStop が react-grid-layout で呼び出されない

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;