Question

我想在点击时创建动画效果。我需要追加元素，并在每次点击后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>
   )
}

使用vanila JS / JQuery很容易做到

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

我应该使用React渲染这些元素（.map, setState，...）还是我可以使用vanilla JS（appendChild，removeChild）？ < / p>

JQuery中的简单示例 - https://jsfiddle.net/W4Km8/10107/

谢谢。

Answer 1

您可以这样做：

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>
  )
}

Answer 2

没有jQuery，只需在Node s：

上使用内置的vanilla JS函数

向元素添加类：elm.classList.add("animation")

要将元素添加为另一个元素：[{3}}（对您而言，parent可能是parent.appendChild(elm)）

删除元素的孩子：document.querySelector(".main")（相当于elm.parentNode.removeChild(elm)）

添加元素到DOM然后在n秒后删除它们？

2 个答案: