Использование пользовательского компонента с реагированием - PullRequest
Новая
       14

Использование пользовательского компонента с реагированием

0 голосов
/ 26 января 2019

Я использую 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

Заранее спасибо!

...