在设定的时间后从DOM中删除元素

Question

我试图找出React在事件发生后从DOM中删除元素的方法。

我试图在copySuccess被触发时闪烁警报（onClick={this.props.handleCopyFact}），然后在5秒后淡出警报。每个状态都在父组件中设置。

以下是我的组件的代码：

module.exports = React.createClass({

render: function() {

var copy = null;
if (!this.props.copying && !this.props.editting) {
  copy = (
    <div className="copy-fact-container" onClick={this.props.handleCopyFact}>
      <i className="icon-copy"></i>
      <span>Copy</span>
    </div>
    );

}

var copySuccess = null;
if (this.props.copySuccess) {
  copySuccess = (
    <div className="copy-success">
      <div><i className="icon icon-clipboard"></i></div>
      <p className="heading">Copied to Clipboard</p>
    </div>
    );
}

return (
  <div className="row-body"
    onMouseEnter={this.props.toggleCopyFact}
    onMouseLeave={this.props.toggleCopyFact}>
    <MDEditor editting={this.props.editting}
      content={this.props.content}
      changeContent={this.props.changeContent}/>
  {copy}
  {copySuccess}
  </div>
);
}
});

Answer 1

一种方法是创建一个Expire组件，它会在延迟后隐藏其子组件。您可以将它与CSSTransitionGroup结合使用来执行淡出行为。

jsbin

用法：

render: function(){
    return <Expire delay={5000}>This is an alert</Expire>
}

组件：

var Expire = React.createClass({
  getDefaultProps: function() {
    return {delay: 1000};
  },
  getInitialState: function(){
    return {visible: true};
  },
  componentWillReceiveProps: function(nextProps) {
    // reset the timer if children are changed
    if (nextProps.children !== this.props.children) {
      this.setTimer();
      this.setState({visible: true});
    }
  },
  componentDidMount: function() {
      this.setTimer();
  },
  setTimer: function() {
    // clear any existing timer
    this._timer != null ? clearTimeout(this._timer) : null;

    // hide after `delay` milliseconds
    this._timer = setTimeout(function(){
      this.setState({visible: false});
      this._timer = null;
    }.bind(this), this.props.delay);
  },
  componentWillUnmount: function() {
    clearTimeout(this._timer);
  },
  render: function() {
    return this.state.visible 
           ? <div>{this.props.children}</div>
           : <span />;
  }
});

Answer 2

更新了@FakeRainBrigand的答案，以支持更现代的React语法，该语法使用类代替不推荐使用的React.createComponent方法。

class Expire extends React.Component {
  constructor(props) {
    super(props);
    this.state = {visible:true}
  }

  componentWillReceiveProps(nextProps) {
    // reset the timer if children are changed
    if (nextProps.children !== this.props.children) {
      this.setTimer();
      this.setState({visible: true});
    }
  }

  componentDidMount() {
    this.setTimer();
  }

  setTimer() {
    // clear any existing timer
    if (this._timer != null) {
      clearTimeout(this._timer)
    }

    // hide after `delay` milliseconds
    this._timer = setTimeout(function(){
      this.setState({visible: false});
      this._timer = null;
    }.bind(this), this.props.delay);
  }

  componentWillUnmount() {
    clearTimeout(this._timer);
  }

  render() {
    return this.state.visible
      ? <div>{this.props.children}</div>
      : <span />;
  }
}

Answer 3

使用挂钩的进一步简化的方法。

从React Hooks文档中

useEffect钩子将这三个componentDidMount，componentDidUpdate和 componentWillUnmount

您的Expire组件应为

import React, { useEffect, useState } from "react";

const Expire = props => {
  const [visible, setVisible] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      setVisible(false);
    }, props.delay);
  }, [props.delay]);

  return visible ? <div>{props.children}</div> : <div />;
};

export default Expire;

现在，在delay组件中传递Expire道具。

<Expire delay="5000">Hooks are awesome!</Expire>

我使用Stackblitz

创建了一个工作示例

Answer 4

更新了@pyRabbit以使用较新的React钩子和一个prop字段来切换children组件的可见性：

const DelayedToggle = ({ children, delay, show }) => {
  let timer = null;

  // First, set the internal `visible` state to negate 
  // the provided `show` prop
  const [visible, setVisible] = useState(!show);

  // Call `setTimer` every time `show` changes, which is
  // controlled by the parent.
  useEffect(() => {
    setTimer();
  }, [show]);

  function setTimer() {
    // clear any existing timer
    if (timer != null) {
      clearTimeout(timer)
    }

    // hide after `delay` milliseconds
    timer = setTimeout(() => {
      setVisible(!visible);
      timer = null;
    }, delay);
  }

  // Here use a `Fade` component from Material UI library
  // to create a fade-in and -out effect.
  return visible 
    ?
    <Fade in={show} timeout={{
      enter: delay + 50,
      exit: delay - 50,
    }}
    >
      {children}
    </Fade>
    : <span />;
};

const Parent = () => {
  const [show, setShow] = useState(false);
  return (
    <>
      <button onClick={() => setShow(!show)}>toggle</button>
      <DelayedToggle 
        delay={300} 
        show={show}
        children={<div><h1>Hello</h1></div>}
      />
    </>
  )
};