Javascript 在React事件中使用setTimeout，出于性能原因，将重用此合成事件

我编写了一个React组件，如下代码所示

常量RippleEffect={children，controls}:any=>{ 常量ctrl=将| |['button']控制为字符串[]； 常数效应=‘涟漪’； const newChildren=React.Children.mapchildren，元素=>{ const onMouseDown=e:any=>{ //坚持；不起作用！ const x=e.pageX-e.target.offsetLeft； 常数y=e.pageY-e.target.offsetTop； 常数w=e.target.offsetWidth.toString； constRipple=document.createElement'span'； ripple.className='ripple'； ripple.style.left=x+'px'； ripple.style.top=y+'px'； ripple.style.setProperty'-scale'，w； e、 target.1.1.1； //必要但有问题！ 设置超时=>{ e、 目标？.parentNode？.removeChildripple； }, 500; }; 如果ctrl.indexOfelement.type！=-1{ 返回React.cloneElementelement，{effect，onMouseDown} } 否则{ 返回React.cloneElementelement } }; 归还新生子女； } 以这种方式使用代码是可能的

主要的，重要的 次要的 成功 看起来一切正常，但我在浏览器控制台中遇到以下错误：

Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property `target` on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist().

我认为在onmousedown事件中使用setTimeout时会出现问题。我在onMouseDown函数的第一行使用了e.persist，但它破坏了整个过程

NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

有人能帮我解决这个问题并删除警告吗？

您对e.persist的想法是正确的，当您调用该函数时，React将从池中删除合成事件，这允许异步使用对它的引用，这是您通过调用setTimeout基本上正在做的事情。你应该坚持这个事件。获取NotFoundError的原因：未能在“节点”上执行“removeChild”：要删除的节点不是此节点的子节点。错误是您正在将ripple附加到event.target（按钮）中。但是您正在父节点上调用removeChild

---

取消注释e.persist并更改e.target？.parentNode？.removeChildripple；到e.target？.removeChildripple

我用计算机解决了这个问题

setTimeout(() => {
    ripple.remove();
}, 500);

而不是

setTimeout(() => {
    e.target?.parentNode?.removeChild(ripple);
}, 500);