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

Question

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

这是我的代码：-

App.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;

PyfinResponsiveGridLayout.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;

grid.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 它使用相同的 gridlayout 控件，但是当我在布局中使用 devextreme React grid 时，就会发生上述问题。

Answer 1

这解决了我的问题 - 参见评论。

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

Answer 2

确保您还添加了 React 网格布局在许多示例中所具有的样式文件。 https://github.com/react-grid-layout/react-grid-layout/blob/master/css/styles.css