React Grid Layout с сеткой данных, переданной дочернему компоненту, не работает

Question

Я хотел реализовать изменяемые размеры компонентов в React с компоновкой React Grid.Я немного поиграл с ним, чтобы понять, как он работает, а затем установил его в своем проекте, но я не могу заставить его работать, так как мои дочерние компоненты даже не имеют класса response-grid-item.

Я использую сетку данных, чтобы передать свойства сетки моему дочернему компоненту.Я не вижу, что делаю неправильно.

import React, {Component} from 'react';
import ChartHolder from '../components/charts/chart-holder';
import RGL, { WidthProvider } from "react-grid-layout";

const ReactGridLayout = WidthProvider(RGL);

class TabContent extends Component {
    constructor(props){
        super(props);
    }


    handleChartResize = (layout) => {
        console.log('this is the layout', layout);
    }

    render(){
        let tabsChartData = this.props.tabsData.currentActiveTabData[0].data;
        let chartData = tabsChartData.map((data, index)=>{
            return(
            <ChartHolder
                key={`${this.props.tabsData.currentActiveTabData[0].tab.id}_${index}`}
                id={index}
                position={data.position}
            />);
        });
        return (
                <div
                    className="tab-content"
                >
                    <ReactGridLayout
                        cols={2}
                        rowHeight={450}
                        width={1000}
                        onLayoutChange={this.handleChartResize}
                        isDraggable={false}
                        isResizeable={true}
                    >
                        {chartData}
                    </ReactGridLayout>
                </div>
            );
    }
}

Это компонент chartHolder, в который я добавляю сетку данных:

import React, {Component} from 'react';
import {css} from 'react-emotion';
import GridLoader from '../spinners/grid-loader';
import Plot from 'react-plotly.js';
import _ from 'lodash';
import Chart from './Chart';
import styled from 'styled-components';

const ChartChildGrid = styled.div`
    background-color: white;
    padding: 5px;
    margin: 5px;
`;

class ChartHolder extends Component {
    render() {
        return(
            <ChartChildGrid
                index={this.props.id}
                draggable={true}
                onDragStart={this.handleDragStart}
                onDragEnd={this.handleDragEnd}
                onDragOver={this.handleDragOver}
                onDragLeave={this.handleDragLeave}
                onDrop={this.handleDragDrop}
                data-grid={this.props.position}
            >
                <div 
                    className="chart-holder-header"
                >
                    <span
                        onClick={()=>this.props.handleRemoveChart(this.props.id)}
                        className="close-tab"
                    > 
                            &times;
                    </span>
                </div>
                <div className="chart-holder-body" >
                    {_.isEmpty(this.props.data) && <GridLoader/>}
                    {
                        !_.isEmpty(this.props.data) && 
                        <Chart
                            data={this.props.data}
                            width={this.props.width}
                        />
                    }
                </div>
            </ChartChildGrid>
        );
    }
}

export default ChartHolder;

Я удалил большую часть проприетарной частикод, но это не работает, как ожидалось, потому что я не могу изменить размер компонента chartHolder, и у него даже нет такого класса, как cssTransforms и реагируемого изменения размера, как я вижу в примерах.Он поддерживает правильную компоновку, как я и ожидал, но, похоже, не изменяет размер.

Answer 1

На самом деле вы можете использовать настроенный компонент, но вы должны передать ему некоторые необходимые реквизиты.Эта проблема решена в вопросе # 299

Внутри GridLayout используйте свой пользовательский компонент, например, так ...

<GridLayout>
    <div key="1">...</div>
    <div key="2">...</div>
    <CustomComponent key="3" />
</GridLayout>

Внутри customComponent вы должны отрендеритьследующие реквизиты.

<div {...this.props} className={this.props.className}>
    content goes here...
</div>

Пример кода

Answer 2

Мне удалось заставить его работать.В случае, если кто-то сталкивается с той же проблемой, проблема заключалась в том, что по какой-то причине layout-grid-layout не принимает настроенные компоненты.Вы должны обернуть его вокруг div.

https://github.com/STRML/react-grid-layout/issues/576, указанная выше ссылка помогла мне обнаружить эту проблему.