以编程方式更改反应中物品的高度/宽度
有没有办法以编程方式更改项目布局的w和h ？ 用例是有一个“折叠”按钮，将高度降低到一个恒定的高度，足以留下物品的标题。 为此，我最初的想法是将layouts保持在组件状态，并手动将折叠物品的高度更改为另一个恒定高度。
然而，似乎库在初始渲染后将忽略对layout更改。 这是这种情况还是它是我的一个错误？ 如果这是正常的行为，是否有另一种方式来以编程方式改变高度？
这是一个独立的组件，可以实现react-grid-layout 。 这是两个“小工具”，它们有一个onClick处理程序来“折叠”它们。 通过设置状态，它会触发重新渲染并重新计算布局，以便任何折叠项目的高度都降低。 控制台日志的统计信息显示渲染的组件具有正确的新布局，但它并没有反映在屏幕上，导致我相信还有另一个参考高度。
jsFiddle例子
import React, { Component } from 'react';
import GridLayout, { WidthProvider } from 'react-grid-layout';
const Grid = WidthProvider(GridLayout);
// # WidgetsContainer
// Container WidgetsContainer component.
class WidgetsContainer extends Component {
static defaultProps = {
isDraggable: true,
isResizable: true,
rowHeight: 1,
cols: 12,
}
constructor(props) {
super(props);
this.state = {
layouts: [
{
i: 'item_1',
x: 0,
y: 0,
w: 5,
h: 25,
}, {
i: 'item_2',
x: 5,
y: 0,
w: 7,
h: 30,
},
],
collapsedWidgets: {},
};
}
toggleWidget(id) {
return () => {
const newState = {...this.state.collapsedWidgets};
const collapsed = typeof newState[id] === 'boolean' ? newState[id] : false;
newState[id] = !collapsed;
this.setState({
collapsedWidgets: newState,
});
}
}
onResize(layouts) {
this.setState({
layouts,
});
}
getModifiedLayouts() {
const { layouts, collapsedWidgets } = this.state;
const newLayouts = layouts.map(layout => {
const newLayout = { ...layout };
if (collapsedWidgets[newLayout.i]) {
newLayout.h = 5;
}
return newLayout;
});
return newLayouts;
}
getWidgets() {
const widgets = [{
component: <div style={{ height: '250px', background: 'lightgray' }}>Content</div>,
title: 'Item 1',
id: 'item_1',
}, {
component: <div style={{ height: '310px', background: 'lightgray' }}>Content 2</div>,
title: 'Item 2',
id: 'item_2',
}];
return widgets;
}
generateDOM() {
const widgets = this.getWidgets();
const modifiedLayouts = this.getModifiedLayouts();
return widgets.map((widget, i) => {
return (<div key={i} _grid={modifiedLayouts[i]}>
<div style={{ background: 'gray' }} onClick={::this.toggleWidget(widget.id)}>
{widget.title}
{widget.component}
</div>
</div>);
});
}
render() {
const widgets = this.generateDOM();
console.log(widgets[0].props._grid)
return (<div style={{ marginTop: '15px' }}>
{widgets ? <Grid className="layout"
{...this.props}
onResizeStop={::this.onResize}
>
{widgets}
</Grid> : null}
</div>);
}
}
export default WidgetsContainer;
事实证明，诀窍是不使用_grid ，而是使用Grid组件上的layout支撑。 这是一个工作jsfiddle：
http://jsfiddle.net/zekedroid/d9o75d24/
代码：
const Grid = ReactGridLayout.WidthProvider(ReactGridLayout);
class Logo extends React.Component {
constructor(props) {
super(props);
this.state = {
layouts: [
{
i: '0',
x: 0,
y: 0,
w: 5,
h: 25,
}, {
i: '1',
x: 5,
y: 0,
w: 7,
h: 30,
},
],
collapsedWidgets: {},
};
}
toggleWidget(id) {
return () => {
const newState = {...this.state.collapsedWidgets};
const collapsed = typeof newState[id] === 'boolean' ? newState[id] : false;
newState[id] = !collapsed;
this.setState({
collapsedWidgets: newState,
});
}
}
onResize(layouts) {
this.setState({
layouts,
});
}
getModifiedLayouts() {
const { layouts, collapsedWidgets } = this.state;
const newLayouts = layouts.map(layout => {
const newLayout = { ...layout };
if (collapsedWidgets[newLayout.i]) {
newLayout.h = 5;
}
return newLayout;
});
return newLayouts;
}
getWidgets() {
const widgets = [{
component: <div style={{ height: '250px', background: 'lightgray' }}>Content</div>,
title: 'Item 1',
id: '0',
}, {
component: <div style={{ height: '310px', background: 'lightgray' }}>Content 2</div>,
title: 'Item 2',
id: '1',
}];
return widgets;
}
generateDOM() {
const widgets = this.getWidgets();
return widgets.map((widget, i) => {
return (<div key={i} style={{ overflowY: 'auto' }}>
<div style={{ background: 'gray' }} onClick={this.toggleWidget(widget.id).bind(this)}>
{widget.title}
{widget.component}
</div>
</div>);
});
}
render() {
const widgets = this.generateDOM();
const modifiedLayouts = this.getModifiedLayouts();
return (<div style={{ marginTop: '15px' }}>
{widgets ? <Grid className="layout"
{...this.props}
onResizeStop={this.onResize.bind(this)}
layout={modifiedLayouts}
>
{widgets}
</Grid> : null}
</div>);
}
}
Logo.defaultProps = {
isDraggable: true,
isResizable: true,
rowHeight: 1,
cols: 12,
}
React.render( <Logo /> , document.getElementById('container'));