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

我试图找出在触发事件后从DOM中移除元素的方法

当触发

onClick={this.props.handleCopyFact}

时，我试图闪烁一个警报（

copycsuccess

），然后在5秒后淡出该警报。每个组件的状态都在父组件中设置

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

以下是我的组件的代码：

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

module.exports=React.createClass({
render:function（）{
var copy=null；
如果（！this.props.copying&！this.props.editing）{
副本=(
复制
);
}
var copycsuccess=null；
if（this.props.copycsuccess）{
copySuccess=(
复制到剪贴板
);
}
返回(
{copy}
{copySuccess}
);
}
});

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

用法：

render:function（）{
返回这是一个警报
}

组成部分：

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

var Expire=React.createClass({
getDefaultProps:function（）{
返回{延迟：1000}；
},
getInitialState:函数（）{
返回{visible:true}；
},
组件将接收道具：函数（下一步）{
//如果更改了子项，请重置计时器
if（nextrops.children！==this.props.children）{
这个.setTimer（）；
this.setState（{visible:true}）；
}
},
componentDidMount:function（）{
这个.setTimer（）；
},
setTimer:function（）{
//清除任何现有计时器
this.\u timer！=null？clearTimeout（this.\u timer）：null；
//在“延迟”毫秒后隐藏
此._timer=setTimeout（函数（）{
this.setState（{visible:false}）；
这个。_timer=null；
}.bind（这个），this.props.delay）；
},
componentWillUnmount:function（）{
clearTimeout（此计时器）；
},
render:function（）{
返回此.state.visible
？{this.props.children}
: ;
}
});

更新了@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 />;
  }
}

class.Component{
建造师（道具）{
超级（道具）；
this.state={visible:true}
}
组件将接收道具（下一步）{
//如果更改了子项，请重置计时器
if（nextrops.children！==this.props.children）{
这个.setTimer（）；
this.setState（{visible:true}）；
}
}
componentDidMount（）{
这个.setTimer（）；
}
setTimer（）{
//清除任何现有计时器
如果（此._计时器！=null）{
clearTimeout（此.\u计时器）
}
//在“延迟”毫秒后隐藏
此._timer=setTimeout（函数（）{
this.setState（{visible:false}）；
这个。_timer=null；
}.bind（这个），this.props.delay）；
}
组件将卸载（）{
clearTimeout（此计时器）；
}
render（）{
返回此.state.visible
？{this.props.children}
: ;
}
}

更新@pyRabbit以使用较新的React钩子和prop字段来切换

子组件的可见性：

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

const DelayedToggle=（{children，delay，show}）=>{
设定时器为空；
//首先，将内部“可见”状态设置为否定
//提供的“表演”道具
const[visible，setVisible]=useState（！show）；
//每次“show”更改时调用“setTimer”，即
//由家长控制。
useffect（（）=>{
setTimer（）；
}，[秀]；
函数setTimer（）{
//清除任何现有计时器
如果（计时器！=null）{
清除超时（计时器）
}
//在“延迟”毫秒后隐藏
计时器=设置超时（（）=>{
setVisible（！visible）；
定时器=空；
}，延误）；
}
//此处使用材质UI库中的“淡入淡出”组件
//创建淡入淡出效果。
返回可见
?
{儿童}
: ;
};
常量父项=（）=>{
const[show，setShow]=useState（false）；
返回(
设置显示（！show）}>切换
)
};

进一步简化了使用钩子的方法

根据文件

useffect
hook组合执行这三个
componentDidMount
，
componentdiddupdate
，以及
组件将卸载

您的
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;

我使用
创建了一个工作示例，您是否可以在CSSTransitionGroup中包装Expire组件，然后使用
。示例在我的css中输入
，以控制转换？您可以包装Expire组件的内容<代码> > 我尝试使用这个组件并包装ReCTCsStRANSIONGROUP，如这里所描述的，但是似乎CSS转换类没有添加到过期组件的子对象中。在设置<代码>可见< /代码>到<代码> false 之前，可以考虑检查组件是否仍然安装。如果组件被某些导航或其他功能破坏，您将收到警告<代码>如果（this.isMounted（））{this.setState（{visible:false}）；}

，但是是的，它应该清除计时器。Pete Hunt还建议我检查React引导的覆盖触发器组件，以便查看如何显示/隐藏元素。为什么

useffect

没有第二个

[]

参数？这个效果应该只运行一次直到你提到它我才意识到。当元素隐藏时，将

useffect

视为调用两次。在添加第二个参数后，它不会。我在SaberHayati更正了我的代码