基于jQuery示例的React集成AnyChart及Ajax请求转换求助

我查找了诸多AnyChart与React集成的示例，但均未涉及Ajax使用场景。现需将示例中的jQuery Ajax请求转换为React实现，请问是否应使用fetch？最终文件格式是什么？

原jQuery实现代码：

<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-map.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script>
</head>
<body>
  <header style="position: absolute; z-index: 1">
    Reservation of seats in <br /> the Chamber theatre
  </header>
  
  <div id="container" style="height: 90vh" />

  <script>
  anychart.onDocumentReady(function () {
    var stage = acgraph.create("container");
    // get svg file
    $.ajax({
      type: "GET",
      url: "https://cdn.anychart.com/svg-data/seat-map/theater.svg",
      // The data that have been used for this sample can be taken from the CDN
      // load SVG image using jQuery ajax
      success: function (svgData) {
        // Data for creating a SeatMap
        var chart = anychart.seatMap([
          { id: "1", value: "Row - 1" },
          { id: "2", value: "Row - 1" },
          { id: "3", value: "Row - 1" },
          { id: "4", value: "Row - 2" },
          { id: "5", value: "Row - 2" },
          { id: "6", value: "Row - 2" },
          { id: "7", value: "Row - 3" },
          { id: "8", value: "Row - 3" },
          { id: "9", value: "Row - 3" },
          { id: "10", value: "Row - 4" },
          { id: "11", value: "Row - 4" },
          { id: "12", value: "Row - 4" },
        ]);

        // set svg data
        chart.geoData(svgData);

        // create chart legend
        chart
          .legend()
          .enabled(true)
          // items source mode categories
          .itemsSourceMode("categories")
          .position("right")
          .itemsLayout("vertical");

        var series = chart.getSeries(0);

        // Set color scale.
        series.colorScale(
          anychart.scales.ordinalColor([
            { equal: "Row - 4", color: "#109BC7" },
            { equal: "Row - 3", color: "#109BC7" },
            { equal: "Row - 2", color: "#109BC7" },
            { equal: "Row - 1", color: "#d38d5f" },
          ])
        );

        // set container id for the chart
        chart.container(stage);
        // initiate chart drawing
        chart.draw();
      },
    });
  });
  </script>
</body>
</html>

1. 是否可以使用fetch？ #

完全可以用fetch替代jQuery的$.ajax，这是适配React项目的最优方案之一：

• fetch是浏览器原生API，无需额外安装依赖，符合React项目轻量化的需求
• 也可选择axios（需npm安装），但fetch已能满足该场景的GET请求需求
• 两者均支持Promise语法，可完美配合React的useEffect钩子处理异步逻辑

2. 最终文件格式 #

在React项目中，这类组件文件通常采用**.jsx**格式（若使用TypeScript则用.tsx），这是React组件的标准文件格式，可被主流React构建工具（如Create React App、Vite）正确解析。

3. React实现示例 #

以下是转换后的完整React组件代码：

import { useEffect, useRef } from 'react';
import anychart from 'anychart';

// 先执行npm安装AnyChart依赖：npm install anychart
const TheaterSeatMap = () => {
  const containerRef = useRef(null);

  useEffect(() => {
    if (!containerRef.current) return;

    // 用fetch替代jQuery的$.ajax请求SVG数据
    fetch('https://cdn.anychart.com/svg-data/seat-map/theater.svg')
      .then(response => response.text())
      .then(svgData => {
        // 创建舞台实例
        const stage = anychart.graphics.create(containerRef.current);
        
        // 初始化座位图数据
        const chart = anychart.seatMap([
          { id: "1", value: "Row - 1" },
          { id: "2", value: "Row - 1" },
          { id: "3", value: "Row - 1" },
          { id: "4", value: "Row - 2" },
          { id: "5", value: "Row - 2" },
          { id: "6", value: "Row - 2" },
          { id: "7", value: "Row - 3" },
          { id: "8", value: "Row - 3" },
          { id: "9", value: "Row - 3" },
          { id: "10", value: "Row - 4" },
          { id: "11", value: "Row - 4" },
          { id: "12", value: "Row - 4" },
        ]);

        // 绑定SVG底图数据
        chart.geoData(svgData);

        // 配置图例
        chart.legend()
          .enabled(true)
          .itemsSourceMode("categories")
          .position("right")
          .itemsLayout("vertical");

        // 设置座位颜色刻度
        const series = chart.getSeries(0);
        series.colorScale(
          anychart.scales.ordinalColor([
            { equal: "Row - 4", color: "#109BC7" },
            { equal: "Row - 3", color: "#109BC7" },
            { equal: "Row - 2", color: "#109BC7" },
            { equal: "Row - 1", color: "#d38d5f" },
          ])
        );

        // 绑定容器并绘制图表
        chart.container(stage);
        chart.draw();

        // 组件卸载时销毁图表，避免内存泄漏
        return () => {
          chart.dispose();
        };
      })
      .catch(error => console.error('SVG数据加载失败:', error));
  }, []);

  return (
    <div>
      <header style={{ position: 'absolute', zIndex: 1 }}>
        Reservation of seats in <br /> the Chamber theatre
      </header>
      <div ref={containerRef} style={{ height: '90vh' }} />
    </div>
  );
};

export default TheaterSeatMap;

关键注意事项 #

• 需先通过npm安装AnyChart依赖：npm install anychart
• 若坚持使用CDN引入AnyChart，需在项目根目录的index.html中提前引入相关CDN脚本，组件中直接使用全局anychart对象即可
• 新增了组件卸载时的清理逻辑，避免内存泄漏

内容的提问来源于stack exchange，提问作者Khalid