reactjs - 反応アプリのアプリルートに他の要素がある場合、React-Grid-Layout 要素はジャンプを処理します

Question

反応アプリのアプリ ルートに他の要素がある場合、私の React-Grid-Layout 要素はジャンプを処理します。レスポンシブ グリッド レイアウトの上にある navbar コンポーネントを削除すると、適切にクリックしてドラッグできます。それ以外の場合は、レスポンシブ グリッド レイアウト要素をクリックしようとすると、下にジャンプします。

これが私のコードです:-

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 のようなものを作成しようとして います。同じグリッドレイアウト コントロールを使用しますが、レイアウトで devextreme 反応グリッドを使用すると、上記の問題が発生します。