reactjs - 使用带有 react-layout-grid 的自定义组件

Question

我正在使用https://github.com/strml/react-grid-layout创建可以调整大小和移动的项目布局。我遇到的问题已经在针对回购的多个问题（如下）中提出，几乎没有任何帮助。

1. https://github.com/STRML/react-grid-layout/issues/806
2. https://github.com/STRML/react-grid-layout/issues/299

这是可以正常工作的代码。

<ResponsiveGridLayout
    layouts={this.state.layouts}
    autoSize={autosize}
    breakpoints={breakpoints}
    onLayoutChange={(layout, newLayout) =>
        this.onLayoutChange(layout, newLayout)}>
    <div key="1">...</div>
    <div key="2">...</div>
    <div key="3">...</div>
</ResponsiveGridLayout>

我希望能够像这样嵌套自定义组件<ResponsiveGridLayout>。其中<CustomComponent />包含可以交互的其他框。

<ResponsiveGridLayout
    layouts={this.state.layouts}
    autoSize={autosize}
    breakpoints={breakpoints}
    onLayoutChange={(layout, newLayout) =>
        this.onLayoutChange(layout, newLayout)}>
    <div key="1">...</div>
    <CustomComponent />
</ResponsiveGridLayout>

这是我遇到的问题的基本再现。

https://stackblitz.com/edit/react-rncnqr

提前致谢！