标签: react-grid-layout

根据React-Grid-Layout 文档

resizeHandle?: ReactElement<any> | ((resizeHandleAxis: ResizeHandleAxis, ref: ReactRef<HTMLElement>) => ReactElement<any>)

可用于实现网格项的自定义调整大小手柄。

就我而言，这是行不通的。它甚至没有抛出任何错误。

代码： https://codesandbox.io/s/react-playground-forked-jwfn3?file =/index.js

注意：如果我删除resizeHandle={<BottomRightHandle />}网格项目将获得默认的调整大小处理程序，这工作正常。

CustomResizeHandle.js

import React from "react";

const SouthEastArrow = () => (
  <svg
    width="20px"
    height="20px"
    version="1.1"
    viewBox="0 0 100 100"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path d="m70.129 67.086l1.75-36.367c-0.035156-2.6523-2.9414-3.6523-4.8164-1.7773l-8.4531 8.4531-17.578-17.574c-2.3438-2.3438-5.7188-1.5625-8.0586 0.78125l-13.078 13.078c-2.3438 2.3438-2.4141 5.0117-0.074219 7.3516l17.574 17.574-8.4531 8.4531c-1.875 1.875-0.83594 4.8203 1.8164 4.8555l36.258-1.8594c1.6836 0.019531 3.1328-1.2812 3.1133-2.9688z" />
  </svg>
);

const CustomHandle = (props) => (
  <div
    style={{
      background: "#fff",
      borderRadius: "2px",
      border: "1px solid #ddd", …

我导入了 @material-ui/core、@devexpress/dx-react-core @devexpress/dx-react-grid 和其他一些模块，但问题没有解决。我的 App.js 代码：

import Grid from '@material-ui/core/Grid';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <Grid container spacing={2}>
        <Grid item xs={8}>
          <Item>xs=8</Item>
        </Grid>
        <Grid item xs={4}>
          <Item>xs=4</Item>
        </Grid>
        <Grid item xs={4}>
          <Item>xs=4</Item>
        </Grid>
        <Grid item xs={8}>
          <Item>xs=8</Item>
        </Grid>
      </Grid>
    </div>
  );
}
export default App;

我正在尝试使用react 和react-grid-layout 来实现highChart。图表应该根据react-grid-layout调整大小，为此，我需要在ResponsiveGridLayout的onResizeStop属性中传递chart.reflow() 。我可以在 HighchartsReact 的回调属性中访问图表，但我无法弄清楚如何访问 ResponsiveGridLayout 组件中的图表以将其传递到 onResizeStop 属性中。

import { Responsive, WidthProvider } from 'react-grid-layout';
import Highcharts, { chart } from 'highcharts'
import HighchartsReact from 'highcharts-react-official'
import { useRef, useState } from "react"
import styles from './Blocks.module.css';

const ResponsiveGridLayout = WidthProvider(Responsive);

const options1 = {
    title: {
        text: 'My chart 1'
    },
    series: [{
        type:'bar',
        data: [1,2,3,4,5,6,7,1,2,3,4,5,6,7,1,2,3,4,5,6,7,1,2,3,4,5,6,7]
    }],

  }

const Blocks = (props) => {

    
    const layout1 = [
        { i: "1", x: 0, y: …