当我使用功能性反应组件时，如何从 HighchartsReact 组件访问图表到 ResponsiveGridLayout 组件

Question

我正在尝试使用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: 0, w: 8, h: 8 },
    ]

   const handleResize = chart => {
    chart.reflow()
   }

    return (
        <div className={styles.blocks}>
            <ResponsiveGridLayout 
                className="layout" 
                layouts={layout1}   
                autoSize={true}
                allow-resize={true}
                isDraggable
                isRearrangeable
                isResizable
                onResizeStop={handleResize}
                breakpoints={{lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}}
                cols={{lg: 12, md: 10, sm: 6, xs: 4, xxs: 2}} 
             >

                <div className={styles.container} key="1" >
                    <HighchartsReact 
                        containerProps = {{ className: styles.chartContainer }}
                        highcharts = { Highcharts } 
                        options = { options1 }
                        callback = { chart => chart}
                    />
                </div>
            </ResponsiveGridLayout>
        </div>
    )
}

export default Blocks

Answer 1

您可以使用 React useRefhook 获取图表实例：

  const chartComponent = useRef(null);

  const handleResize = () => {
    const chart = chartComponent.current?.chart;
    if (chart) {
      chart.reflow();
    }
  };

  return (
    <HighchartsReact
      ref={chartComponent}
      ...
    />
  );

现场演示： https://codesandbox.io/s/highcharts-react-demo-fork-n4y01? file=/demo.jsx

文档： https ://github.com/highcharts/highcharts-react#how-to-get-a-chart-instance