几秒后隐藏 div ReactJS

Question

我试图在 ReactJS 上几秒钟后隐藏一个 div。到目前为止，这是我的代码：

setTimeout(function() {
    $('#submitmsg').fadeOut('fast');
}, 3000);

<div id="submitmsg">
    {message && <span> Messaged received. I'll respond to your query ASAP!  </span> }
 </div>

我收到一个错误，提示“$”未定义。

Answer 1

$ 是 jquery
的符号在反应中我们会说

  document.getElementById('#submitmsg').fadeOut('fast');

另外，我会使用一种更简单的方法，将布尔值声明为 usestate

const Component = () =>{
  const [showElement,setShowElement] = React.useState(true)
  useEffect(()=>{
    setTimeout(function() {
      setShowElement(false)
         }, 3000);
       },
   [])
      
  return(
    <div>
       {showElement?<div>I'm here and i will be gone</div>:<></>} 
    </div>
  )
}

更新：

在这里我创建了一个 codesandbox 示例

这里是整个代码，当我尝试它时它工作正常，正如你在上面的 codesandbox 中看到的那样

import React, { useEffect } from "react";

const MyComponent = () => {
  const [showElement, setShowElement] = React.useState(true);
  useEffect(() => {
    setTimeout(function () {
      setShowElement(false);
    }, 10000);
  }, []);

  return (
    <div>
      <div>
        {showElement ? (
          <div
            style={{
              height: "100vh",
              background: "black",
              color: "white",
              fontSize: "30px",
              display: "flex",
              flexDirection: "column",
              alignItems: "center",
              justifyContent: "center",
              fontFamily: "roboto",
              opacity: showElement ? 1 : 0
            }}
          >
            I'm here and i will be gone
          </div>
        ) : (
          <div></div>
        )}{" "}
      </div>
    </div>
  );
};
export default MyComponent;

https://codesandbox.io/s/thirsty-rosalind-o9pds?file=/src/App.js

几秒后隐藏 div ReactJS

Hiding div after a few seconds ReactJS

transition

hide

reactjs

更新：