问题标签 [react-grid-layout]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
101 浏览

javascript - React DevExtreme React Grid 过滤行

在过去的几天里,我一直在使用 DevExtreme React Grid,并且在文档方面遇到了一些麻烦。

我使用 SearchState、SearchPanel 和 IntegratedFiltering 实现了搜索栏功能,就像文档中所说的那样。我的问题是是否可以在过滤发生后返回表格显示的行列表。

表格上的每一行代表一个网站,每当显示该行时,我希望它 ping 该网站以检查该网站是否已启动。通过分页,我可以通过查找我当前所在的页面以及每页有多少行来查找我需要 ping 的行。我似乎无法弄清楚如何使用搜索栏实现来做到这一点。任何帮助,将不胜感激。

0 投票
1 回答
2122 浏览

reactjs - 反应网格布局 x,y,w,h

再会,

我想更改反应网格布局的位置,但是我不明白 React-Grid-Layout x,y,w,h 的一件事,尤其是 x,y 部分。我知道 w 是宽度,h 是高度。我已经完成了 css 网格,但我不确定这个 React-Grid-Layout 是否与 css 一样。

请帮忙。

0 投票
2 回答
2238 浏览

reactjs - 带有打字稿的反应网格布局不起作用

我有一个新项目,我尝试使用 react-grid-layout 来构建仪表板。不幸的是,我无法让它工作。

我用:

"@types/react-grid-layout": "0.16.5" "react-grid-layout": "0.16.5"

当我尝试在 tsx 文件中使用它时

我得到错误:

/node_modules/@types/react-grid-layout/index"' 没有导出的成员 'ReactGridLayout'。

任何建议我做错了什么?

更新

附加信息:我在 .Net core 2.1 上运行的 SPA Webapp 中使用它 我如何尝试使用它:

0 投票
2 回答
347 浏览

javascript - 反应 UI 元素放置?

我是 React 的新手,所以如何放置 UI 元素让我有点不知所措。

我想要以下布局: 在此处输入图像描述

但我无法完全弄清楚。在黑盒子里应该有一组复选框(我已经制作的一个组件)垂直堆叠,在蓝色盒子里同样的一组复选框,但水平放置。在红色框中,一个谷歌散点图(我也设置好了)。

使用反应列我认为我可以设置它,使用两个列。但后来我意识到我必须以某种方式为复选框设置父级,所以这不是解决方案。

然后我想“为什么不使用网格?” 所以我发现 Google 在他们的 Material 包中有网格(这很好,因为我以任何方式使用它)所以我导入了它,但我仍然不能完全正确:

在此处输入图像描述

我将如何解决这个问题?

我的代码如下:

0 投票
0 回答
1048 浏览

reactjs - 使用带有 react-layout-grid 的自定义组件

我正在使用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>。其中<CustomComponent />包含可以交互的其他框。

这是我遇到的问题的基本再现。

https://stackblitz.com/edit/react-rncnqr

提前致谢!

0 投票
2 回答
5451 浏览

javascript - 将数据网格传递给子组件的反应网格布局不起作用

我想用 React Grid Layout 在 React 中实现可调整大小的组件。我玩了一下它以了解它是如何工作的,然后将它安装到我的项目中,但我似乎无法让它工作,因为我的子组件甚至没有类 react-grid-item。

我正在使用 data-grid 将网格道具传递给我的子组件。我看不出我做错了什么。

这是我添加数据网格的 chartHolder 组件:

我已经删除了代码的大部分专有部分,但这没有按预期工作,因为我无法调整 chartHolder 组件的大小,而且它甚至没有像我在示例中看到的那样的 cssTransforms 和 react-resizable 类。它确实像我预期的那样控制了正确的布局,但似乎无法调整大小。

0 投票
3 回答
1561 浏览

reactjs - 是否可以使用 react-grid-layout 获得初始断点?

使用https://github.com/STRML/react-grid-layout

我需要知道componentDidMount. 基于断点,我知道我应该提供哪些项目大小(网格项目由用户从多项选择中“拾取”)。

react-grid-layout提供更新断点的API:

但是这个函数只在断点更改时触发。我需要一个解决方案来知道组件安装后当前的断点是什么。

0 投票
1 回答
1028 浏览

reactjs - 组件隐藏时的响应式网格布局空块

我试图在 ResponsiveReactGridLayout 上隐藏组件,但是一个组件隐藏它会创建空白空间,因为其他组件不会填充它。

我检查链接到组件的复选框是否被选中隐藏。

我也将大小设置为零,但它也不起作用。

它给了我以下结果:

上面的链接对应组件不隐藏时的显示。 不隐藏

这个对应问题,可以看空间。 组件隐藏

0 投票
2 回答
2554 浏览

javascript - React Data Grid 行在动态提供高度时消失

我正在尝试制作RDG Table可以ReactGridLayout在高度和宽度上扩展的(用于我使用的扩展)。我正在使用为我的组件(在我的案例组件中)react-sizeme动态提供height& 。现在,当表格中的滚动条位于顶部时,表格的高度和宽度会正确扩展。下图显示了顶部带有滚动条的表格: 如果我展开表格,一切都会正常工作,如下图所示: WidthExample顶部的滚动条在此处输入图像描述

一旦我们将 Scrollbar 放在中间,然后扩大表格的高度,行就会消失。只要我在表格中滚动少量,这些行就会变得可见。例如,在下图中,滚动条不在开头(第 6 行可见)。 滚动条不在开头

现在,如果我展开表格,一些行会消失,如下图所示: 行消失

当滚动条未开始时,我无法理解为什么行在扩展时会消失。

CodeSandbox 链接:https ://codesandbox.io/embed/rdg-optimising-scrolling-n6xpj

编辑:表当前包含 199 行。

0 投票
1 回答
84 浏览

react-grid-layout - ResponsiveGridLayout 静态项目留下巨大的差距(不可用)

不知道怎么办,有人遇到过吗?

当网格项目是静态的时,它会在项目之前留下很大的空白: https ://codesandbox.io/s/hungry-dawn-cww14

当网格项不是静态的时,一切似乎都很好: https ://codesandbox.io/s/relaxed-dhawan-2xs1l