将自定义组件与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

谢谢！