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

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

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