我正在使用react-grid-layout Thisdrag and drop and resizing在我的网站中启用。所以拖放我能够实现并将我的布局存储到本地存储也完成了。
我正在使用本地存储来保存我的布局，以便使用此示例获得更好的用户体验
事情是我想要做的是有条件地为盒子提供高度和宽度，比如如果empName==="steve"宽度应该是 5 或者它应该是 3
所以我所做的是
const generateLayout = () => {
const p = data1 || []; //props;
return p[0].comp_data.map(function (item, i) {
console.log(item);
if (item.empName === "steve") {
return {
x: (i * 2) % 12,
y: Math.floor(i / 6),
w: 2,
h: 4,
i: i.toString()
};
} else {
return {
x: (i * 2) % 12,
y: Math.floor(i / 6),
w: 4,
h: …有没有一种方法以编程方式更改w和h项目的布局？用例是有一个"折叠"按钮,它将高度降低到一个恒定的高度,足以留下物品的标题.为此,我最初的想法是保持layouts组件的状态并手动将折叠项目的高度更改为另一个恒定高度.
但是,似乎库将忽略layout初始渲染后的更改.是这种情况还是我的错误？如果这是正常的行为,是否还有另一种以编程方式改变高度的方法？
这是一个实现的独立组件react-grid-layout.这是两个"小部件",它们有一个onClick处理程序来"折叠"它们.通过设置状态,它会触发重新渲染并重新计算布局,以便任何折叠项目的高度降低.控制台日志状态显示渲染的组件具有正确的新布局,但它不会反映在屏幕上,这使我相信还有另一个高度参考.
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', …我正在使用react-grid-layout来制作drag-drop and resize components，所以我能够实现文档中提到的功能。
我的问题
{ {i: 'a', x: 0, y: 0, w: 1, h: 2}在具有预定义布局的静态 Ui 中，我喜欢下面的内容。
const layout = [
{ i: "a", x: 0, y: 0, w: 2, h: 1 },
{ i: "b", x: 2, y: 0, w: 2, h: 1 },
{ i: "c", x: 4, y: 0, w: 2, h: 1 },
{ i: "d", x: 6, y: 0, w: 2, …使用https://github.com/STRML/react-grid-layout
我需要知道当前的断点componentDidMount。基于断点，我知道我应该提供什么项目大小（网格项目由用户从多个选择中“拾取”）。
react-grid-layout提供更新断点的API：
onBreakpointChange = breakpoint => this.props.updateBreakpointKey(breakpoint);
但此函数仅在断点更改时触发。我需要一个解决方案来了解组件安装后当前的断点是什么。
我一直在研究一个反应网格布局来在屏幕上显示和移动图形。目前我可以将plotly.js 图表添加到容器中。它是可移动的，但不随容器调整大小。我想知道是否需要异步函数来允许在调整容器框大小时重新渲染绘图。下面是网格布局和直方图的代码。
const ReactGridLayout = WidthProvider(Responsive);
const Dash = (props) => {
const { value, addItem } = props
const ref = useRef()
return (
<div>
<button onClick={addItem}>Add Item</button>
<ReactGridLayout
className="layout"
onLayoutChange={(e) => console.log(props.layout)}
breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
cols={{ lg: 12, md: 12, sm: 6, xs: 4, xxs: 2 }}
resizeHandles={['s', 'w', 'e', 'n', 'sw', 'nw','se', 'ne']}
verticalCompact={false}
// onDragStart={'.dragbackground'}
// isDraggable={false}
draggableHandle=".dragHandle"
>
{_.map(value, (item, i) => (
<div id = …当尝试在 ResponsiveGridLayout 中拖动任何面板或调整其大小时，出现以下错误：<DraggableCore> not mounted on DragStart!
这是我的网格布局：
<ResponsiveGridLayout
className="layout"
cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
onLayoutChange={(layout, allLayouts) => handleLayoutChange(allLayouts)}
rowHeight={30}
layouts={layouts}
measureBeforeMount={false}
compactionType="vertical"
useCSSTransforms={true}
>
<Panel key="a" title="Interactions per country">
<PieGraph />
</Panel>
</ResponsiveGridLayout>
这是每个单独的面板：
export const Panel: React.FC<IPanelProps> = (props) => {
const {className, children, title, shouldScroll, ...defaultPanelProps} = props;
let scrollClass = shouldScroll ? " scroll-y" : "";
return (
<div {...defaultPanelProps} className={`custom-panel wrapper ${className}`} >
{title && <div className="custom-panel-title …我正在使用 Meteor 和 ReactJS 开发一个应用程序。我正在使用react-grid-layout组件来创建项目网格。
问题是每个元素的位置需要手动指定。在我的应用程序中，我基于 Meteor Collection 生成网格项，我可能不知道该集合中有多少项。
例子
import React from "react";
import Item from "/ui/components/workspace/item.jsx";
import ReactGridLayout from 'react-grid-layout';
export default class WorkspaceGrid extends React.Component {
componentDidMount() {
}
render() {
let testCollection = [1,2,3,4,5,6,7,8,9,10]
return (
<ReactGridLayout isResizable={false} className="layout" cols={4} width={1200}>
{testCollection.map((item, x) =>
<Item key={x} _grid={{x: ?, y: ?, w: 1, h: 2}} />
)}
</ReactGridLayout>
)
}
}
在上面的例子中，网格每行应该有 4 列，但是我如何指定x和y，以便testCollection项目 1-4 位于第 1 行，5-8 位于第 …
我想将一个函数传递给子组件，但出现此错误。
Invalid value for prop passedFunction on <div> tag.
class Parent extends Component {
passedFunction(){}
render() {
<Child passedFunction={this.passedFunction}/>
}
}
class Child extends Component {
render() {
<div onClick={this.props.passedFunction}></div>
}
}
基本上是我想做的。
var ReactGridLayout = require（'react-grid-layout'）;
var MyFirstGrid = React.createClass({
passedFunction:function(){}
render: function () {
return (
<ReactGridLayout className="layout" cols={12} rowHeight={30} width={1200}>
<div key="a" data-grid={{x: 0, y: 0, w: 1, h: 2, static: true}}>a</div>
<div key="b" data-grid={{x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4}}>b</div>
<div …我正在努力实施react-grid-layout.所有示例都通过_griddiv属性传递网格项配置:
createElement(el) {
...
return (
<div key={i} _grid={el}>
...
</div>
);
},
在我的实施中:
return (
<div key={i} _grid={el}>
<DashboardTestWidget widgetName={el.name} menuName={this.props.menuName}/>
<span className="remove" style={removeStyle} onClick={this.onRemoveItem.bind(this, i)}>x</span>
</div>
)
我收到一个错误:
dashboard_view.browserify.browserified.js:1216 Warning: Unknown prop `_grid` on <div> tag. Remove this prop from the element. For details, see <URL ommitted because SO complained about URL shorteners>
in div (created by DashboardLayout)
in Resizable (created by GridItem)
in DraggableCore (created by GridItem)
in GridItem (created by ReactGridLayout)
in …