Javascript 如何在react js中30秒后从dom中删除usestate元素

我想在30秒后从dom中删除usestate元素 有没有办法做到这一点：

let [showComponent, setShowComponent] = useState(false);

const handleClick = () => setShowComponent(!showComponent); 

这是我的组成部分：

<div role="button" className="user-navigation--item" onClick={toggleLogoutMessage}>
    <i className="fas fa-sign-out-alt user--nav--icon"></i>
    {' Logout '}
    {showComponent && <h1>Do you really want to log out</h1>} // remove this element after 30 sec
</div>

{“注销”}
{showComponent&&是否确实要注销}//30秒后删除此元素

尝试使用setTimeout延迟功能：

setTimeout(function() { your_func(); }, 30000);

let [showComponent, setShowComponent] = useState(false);

const handleClick = () => {
 setTimeout(function() { setShowComponent(prev => !prev ); }, 30000);
}

---

是的，可以做到。下面是一个简化的示例，它最初将

show

状态设置为

true

，然后启动

setTimeout

，30秒后将其设置回

false

function Component() {
  const [show, setShow] = useState(false);

  const showMessage = () => {
    setShow(true);
    setTimeout(() => {
      setShow(false);
    }, 30000);
  }

  return (
    <>
      <button onClick={showMessage}>Logout</button>
      {show && "Are you sure?"}
    </>
  );
}

函数组件（）{
const[show，setShow]=useState（false）；
const showMessage=（）=>{
设置显示（正确）；
设置超时（（）=>{
设置显示（假）；
}, 30000);
}
返回(
注销
{显示&&“你确定吗？”}
);
}

let [showComponent, setShowComponent] = useState(false);

const handleClick = () => setTimeout(function() { setShowComponent(!showComponent); }, 30000);