我正在使用 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 的组合。