主页 / coding / 问题 / 77752586
Accepted
Dolev Dublon
Asked: 2024-01-03 22:30:13 +0800 CST

ReactJS 扫描线演示：多个表面未同时更新的问题

  • 772

我需要使用reactjs制作具有多个曲面的扫描线的演示，但问题是，当我选择显示超过1个曲面时，它仅在最新创建的曲面上播放数据，并停止在旧曲面上绘制数据。

您可以在此处查看示例和代码： https: //28zf6p.csb.app/

这是这个问题的 GIF： 在此输入图像描述

注意：我需要多个表面的原因是我希望可以使用 sortableJS 拖动图表以遵循我得到的设计。

javascript

1 个回答

  1. Best Answer

    我没有深入挖掘，似乎生成图形的函数有错误并且记住了 div 的链接。

    但是，如果将 id 属性添加到 div，它就会开始正常工作。也许库本身在底层使用 id 来访问 DOM 元素。

    在 App.js 中

    for (let i = 0; i < value; i++) {
  sciCharts.push(<SciChart key={i} id={i} />);
}

    在 SciChart.jsx 中

    const SciChart = ({ id }) => {
...
return (
  <div id={id} ref={ref} style={{ height: "20%", width: "20%" }}>
    SciChart
  </div>
);
}

    在这里测试https://codesandbox.io

    • 3

相关问题