ReactJS 横扫线演示：多个表面无法同时更新的问题

Question

我需要用ReactJS制作一个包含多个表面的扫描线演示，但问题是当我选择显示超过1个表面时，它只会根据最新创建的表面的数据进行绘制，并停止在旧的表面上绘制数据。

你可以在以下链接查看带有代码的例子：https://28zf6p.csb.app/

这是问题的一个GIF展示：

注意：我之所以需要多个表面，是因为我希望使用sortableJS使图表可拖拽，以遵循我所设计的布局。

ghostdog74 · Answer

我没有深入探究，但似乎在生成图表的函数中存在一个错误，并且与div的链接未能正确更新。然而，如果你向div添加id属性，它会开始正常工作。可能该库内部本身就使用id来访问DOM元素。

在App.js文件中：

for (let i = 0; i < value; i++) {
  sciCharts.push();
}

在SciChart.jsx组件中：

const SciChart = ({ id }) => {
  ...
  return (
    
      SciChart
    
  );
};

你可以在此链接测试这个修复方案。

Bojangles · Answer

你可以使用官方开源的SciChart来解决这个问题。查看以下在线示例：

// SciChart.jsx 文件

import { useRef } from "react";
import { SciChartReact } from "scichart-react";
import { dataForSciChart, drawData, initScichart } from "./initScichart";

const SciChart = () => {
  const intervalTimer = useRef();
  return (
    }
      // 初始化图表配置函数
      initChart={initScichart}
      // 图表初始化后回调，接收绘图所需的数据系列作为参数
      onInit={({ xyDataSeries }) => {
        intervalTimer.current = drawData(xyDataSeries, dataForSciChart);
      }}
      // 当组件卸载时清除定时器以释放资源
      onDelete={() => {
        clearInterval(intervalTimer.current);
      }}
    />
  );
};