Javascript 向DOM添加元素，然后在n秒后删除它们？

我想在单击时创建动画效果。我需要追加元素，并在每次单击后3秒内将其删除。没有一个元素，如果用户在3秒内点击100次，我应该添加100个元素并删除它

click() {
  // create element
  // append element to div
  // remove in 3 sec
}
render() {
   return (
     <div className="main" onClick={this.click}>Click it</div>
   )
}

点击（）{
//创建元素
//将元素附加到div
//3秒后移除
}
render（）{
返回(
点击它
)
}

使用vanila JS/JQuery很容易

click() {
  let elm = $('</div>');
  elm.addClass('animation');
  $('.main').append(elm);
  setTimeout(() => {
     elm.remove();
  }, 3000);
}

点击（）{
设elm=$（''）；
elm.addClass（“动画”）；
$（'.main'）.append（elm）；
设置超时（（）=>{
elm.remove（）；
}, 3000);
}

我应该使用React来呈现这些元素（

.map，setState

，…）还是可以使用vanilla JS（

appendChild

，

removeChild

）？

JQuery中的简单示例-

---

谢谢。

您可以这样做：

this.state = { items: [] }

addItem() {
  const newItem = (<span>hello</span>)

  this.setState({ items: this.state.items.concat(newItem) }, () => {
    setTimeout(() => {
      this.setState({ items: this.state.items.filter(i => i !== newItem) })
    }, 3000)
  })
}

render() {
  return (
    <div>
      <div className="main" onClick={this.addItem}>Click it</div>
      {this.state.items.map((item, i) =>
        <div key={i}>{item}</div>
      )}
    </div>
  )
}

this.state={items:[]}
附加项（）{
const newItem=（您好）
this.setState（{items:this.state.items.concat（newItem）}，（）=>{
设置超时（（）=>{
this.setState（{items:this.state.items.filter（i=>i！==newItem）}）
}, 3000)
})
}
render（）{
返回(
点击它
{this.state.items.map（（item，i）=>
{item}
)}
)
}

没有jQuery，只需使用

节点上的内置vanilla JS函数即可

s:

要将类添加到元素，请执行以下操作：

将一个元素作为另一个元素的子元素添加：（对于您来说，

parent

可能是）

---

要删除元素的子元素：（相当于，

elm.parentNode.removeChild（elm）

）

是的，这是非常简单的方法，但在使用React时，我不能使用JQuery来操作DOM。不？我是说JQuery或香草JS这是香草JS，没有JQuery。。。阅读链接，它们指向MDN。等等，你不能使用vanilla JS吗？为什么不呢？那没有道理这是我的问题。我认为ReactJS不允许在其DOM中添加/删除DOM元素。如果我错了，那太棒了：）你认为这个解决方案比vanilla JS好吗？在这种情况下，你会使用什么？@Dilan在React中说，除非你绝对需要，否则你不应该直接操纵DOM。所以，是的，这是“更好”比香草JS时，与反应真棒，谢谢很多。我想再检查一下。在这种情况下，Vanilla JS是一种更简单的方法，我不需要每次单击都重新渲染组件。这就是我问这个问题的原因。@Dilan说实话，我不知道你是否可以用普通的JS方法操纵React的虚拟DOM来操纵“真实”的DOM。我希望另一个答案的作者已经测试了他的代码。顺便说一句，我测试了我的，它能工作。：）回答得好！您可以使用：

items.filter（i=>i！==newItem）