Reactjs 如何在HighchartsReact中添加全屏按钮？

我正在使用并希望添加一个按钮，允许我切换不在导出菜单中的全屏模式，如

我找到了帮助主题文档，但似乎无法访问

Highcharts.Chart.prototype.toggleFullscreen（）

中的

HighchartsReact

方法

我还发现可以导入以下内容：

从“海图/模块/全屏”导入海图全屏

但是在互联网上似乎没有任何关于它的信息

我找不到关于如何执行此操作的任何其他文档

如果可能的话，正确的处理方法是什么

使现代化
我遵循了下面第三条评论中的示例，但得到了错误：

未捕获类型错误：chart.current.chart.downloadssvg不是一个函数
您需要导入导出模块并调用：

new Highcharts.FullScreen(chart.container);


现场示例：

带有React的示例：
HighCharts React-导出按钮自定义/添加自定义导出按钮

给你

//HighCharts
import Highcharts from 'highcharts'
import HighchartsReact from 'highcharts-react-official'

require('highcharts/modules/exporting')(Highcharts);
require('highcharts/modules/export-data')(Highcharts);

const Chart = () =>
{
    const chart = useRef();

const exportHandler = (type) => 
  {
    if (chart && chart.current && chart.current.chart) 
    {
      switch (type) 
      {
        case "png":
          chart.current.chart.exportChart();
          break;

        case "jpeg":
          chart.current.chart.exportChart({type: 'image/jpeg'});
          break;

        case "svg":
          chart.current.chart.exportChart({type: 'image/svg+xml'});
          break;

        case "pdf":
          chart.current.chart.exportChart({type: 'application/pdf'});
          break;

        case "csv":
          chart.current.chart.downloadCSV();
          break;

        case "xls":
          chart.current.chart.downloadXLS();
          break;

        case "table":
          chart.current.chart.toggleDataTable();
          break;

        case "fullScreen":
          chart.current.chart.fullscreen.toggle()

          break;

        case "print":
          chart.current.chart.print();
          break;
      
        default:
          break;
      }      
    }
  };
    
    return(
     <>
        <HighchartsReact
          highcharts={Highcharts}

          ref={chart}
        />

     <button onClick = {() => exportHandler('png')}>Custom Export</buttnon
    </>
    )
}

export default Chart;

//海图
从“Highcharts”导入Highcharts
从“highcharts反应官方”导入highcharts反应
要求（“海图/模块/导出”）（海图）；
要求（“高图/模块/导出数据”）（高图）；
常数图=（）=>
{
const chart=useRef（）；
const exportHandler=（类型）=>
{
if（chart&&chart.current&&chart.current.chart）
{
开关（类型）
{
案例“png”：
chart.current.chart.exportChart（）；
打破
案例“jpeg”：
chart.current.chart.exportChart（{type:'image/jpeg'}）；
打破
案例“svg”：
chart.current.chart.exportChart（{type:'image/svg+xml'}）；
打破
案例“pdf”：
chart.current.chart.exportChart（{type:'application/pdf'}）；
打破
案例“csv”：
chart.current.chart.downloadCSV（）；
打破
案例“xls”：
chart.current.chart.downloadXLS（）；
打破
案例“表格”：
chart.current.chart.toggleDataTable（）；
打破
案例“全屏”：
chart.current.chart.fullscreen.toggle（）
打破
案例“打印”：
chart.current.chart.print（）；
打破
违约：
打破
}      
}
};
返回(
exportHandler（'png'）}>自定义导出看看这个：谢谢，是的，我不想要导出菜单中的按钮。好吧！那么也许这个：谢谢，我已经更新了我上面的问题。非常感谢这一点，很高兴知道它能工作！这对我来说是抛出错误-首先，我使用的是一个函数组件，所以我得到了linter抛出
不要使用“new”来副作用.eslint（无新）
但我知道我只需将新的实例化分配给一个变量即可解决此问题。其次，当我使用TypeScript时，我得到的
属性“FullScreen”在类型“typeof import”（“…/node\u模块/highcharts/highcharts”）上不存在“.
同样
这显然也是多余的。这里有什么想法吗？谢谢