我想在 React 中使用 React Grid Layout 实现可调整大小的组件。我稍微玩了一下它以了解它是如何工作的,然后将其安装到我的项目中,但我似乎无法让它工作,因为我的子组件甚至没有类react-grid-item。
我正在使用数据网格将网格 Prop 传递给我的子组件。我看不出我做错了什么。
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>
);
}
}
这是我添加数据网格的图表持有者组件:
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"
>
×
</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 和 React-Resized。 它确实按照我的预期控制台了正确的布局,但似乎无法调整大小。
最佳答案
我设法让它工作。如果有人面临同样的挑战,问题是因为由于某种原因,react-grid-layout 不接受自定义组件。您必须将其包裹在 div 周围。
https://github.com/STRML/react-grid-layout/issues/576上面的链接帮助我发现了这个问题。
关于javascript - React 网格布局,数据网格传递到子组件不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54550496/