0

我正在使用 vis-js 时间轴库,我想在模板选项中使用 JSX,如示例所示。我结合使用 ReactDOM.createPortal 和 ReactDOM.render 为我的所有项目创建模板。

const options = {
  template: (item, element) => {
    return ReactDOM.createPortal(
      ReactDOM.render(<Tag key={item.id}>item.id</Tag>, element),
      element
    );
  },
};

这似乎导致了内存泄漏。随着时间的推移,数量会Detached HTMLDivElements增加,直到我内存不足。
当我将代码更改为常规 javascript 时,内存使用情况似乎很好。

const options = {
  template: (item, element) => {
    return "<div key={item.id}>item.id</div>";
  },
};

正如我从这个页面了解到的那样,在这种情况下,我不应该使用 ReactDOM.CreatePortal,因为时间轴和其中的项目是我自己的 DOM 节点的子节点。但是当我忽略它时,我会得到与这里报告的相同的错误。我很好奇导致这种内存泄漏的原因以及如何避免它。特别是因为在前面提到的示例中使用了 ReactDOM.CreatePortal 和 ReactDOM.Render 的组合。

4

0 回答 0