使用自定义组件与React布局网格

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。谢谢！

- Batman

Answer 1

你应该给CustomComponent添加关键属性

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

- Кутявин Игорь