如何在反应js中30秒后从dom中删除usestate元素

Question

我想在 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>

Answer 1

尝试使用 setTimeout 来延迟您的 function：

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

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

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

Answer 2

是的，这是可以做到的。 以下是一个简化的示例，它最初将show state 设置为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?"}
    </>
  );
}

Answer 3

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

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