如果 react 应用程序中的应用程序根目录中有其他元素，则 React-Grid-Layout 元素会处理跳转

Question

如果我的反应应用程序中的应用程序根目录中有其他元素，我的 React-Grid-Layout 元素会处理跳转。 如果我删除响应式网格布局上方的导航栏组件，我可以正确单击和拖动，否则，当我尝试单击响应式网格布局元素时，它会向下跳转。

这是我的代码：-

应用.js

import React from 'react';
import './App.css';
import '@devexpress/dx-react-grid-bootstrap4/dist/dx-react-grid-bootstrap4.css';
import PyfinNavbar from './components/navbar';
import HomeView from './home';
import PyfinResponsiveGrid from './ResponsiveGridLayout';
function App() {
return (
<div className="App">
<PyfinNavbar></PyfinNavbar>
<HomeView></HomeView>
<PyfinResponsiveGrid></PyfinResponsiveGrid>
</div>
);
}
export default App;

PyfinResponsive GridLayout.jsx

import React from "react";
import { Responsive as ResponsiveGridLayout } from "react-grid-layout";
import PyfinGrid from "./grid";
let layouts = {
lg: [
{ h: 2, w: 2, x: 0, y: 0 },
{ h: 2, w: 2, x: 1, y: 0 },
{ h: 2, w: 2, x: 2, y: 0 },
{ h: 2, w: 2, x: 3, y: 0 }
],
sm: [
{ h: 2, w: 2, x: 0, y: 0 },
{ h: 2, w: 2, x: 1, y: 0 },
{ h: 2, w: 2, x: 2, y: 0 },
{ h: 2, w: 2, x: 3, y: 0 }
],
md: [
{ h: 2, w: 2, x: 0, y: 0 },
{ h: 2, w: 2, x: 1, y: 0 },
{ h: 2, w: 2, x: 2, y: 0 },
{ h: 2, w: 2, x: 3, y: 0 }
],
xs: [
{ h: 2, w: 2, x: 0, y: 0 },
{ h: 2, w: 2, x: 0, y: 1 },
{ h: 2, w: 2, x: 0, y: 2 },
{ h: 2, w: 2, x: 0, y: 3 }
],
xxs: [
{ h: 2, w: 2, x: 0, y: 0 },
{ h: 2, w: 2, x: 0, y: 1 },
{ h: 2, w: 2, x: 0, y: 2 },
{ h: 2, w: 2, x: 0, y: 3 }
]
};
class PyfinResponsiveGrid extends React.Component {
render() {
return (
<ResponsiveGridLayout
className="layout"
layouts={layouts}
breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
>
<div className="widgetborder" key="1">
<PyfinGrid></PyfinGrid>
</div>
</ResponsiveGridLayout>
);
}
}
export default PyfinResponsiveGrid;

网格.jsx

import React from "react";
import { PagingState, IntegratedPaging } from "@devexpress/dx-react-grid";
import {
Grid,
Table,
TableHeaderRow,
PagingPanel
} from "@devexpress/dx-react-grid-bootstrap4";
import customers from "./customers";
const GridView = () => (
<Grid
rows={customers}
columns={[
{ name: "customerID", title: "ID" },
{ name: "companyName", title: "Company" },
{ name: "contactName", title: "Name" },
{ name: "contactTitle", title: "Title" },
{ name: "address", title: "Address" }
]}
>
<PagingState defaultCurrentPage={0} pageSize={1} />
<IntegratedPaging />
<Table />
<TableHeaderRow />
<PagingPanel />
</Grid>
);
class PyfinGrid extends React.Component {
state = {};
render() {
return (
<div>
<GridView></GridView>
</div>
);
}
}
export default PyfinGrid;

基本上我正在尝试创建类似的东西 https://www.bitmex.com/app/trade/XRPH20 它使用相同的网格布局控件，但是当我在布局中使用 devextreme 反应网格时，会发生上述问题。

Answer 1

这为我解决了问题 - 请参阅评论。

.react-grid-layout {
position: relative;
}