我试图在 ReactJS 上几秒钟后隐藏一个 div。到目前为止,这是我的代码:
setTimeout(function() {
$('#submitmsg').fadeOut('fast');
}, 3000);
<div id="submitmsg">
{message && <span> Messaged received. I'll respond to your query ASAP! </span> }
</div>
我收到一个错误,说“$”未定义。
答案 0 :(得分:0)
$
是 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>
)
}
这是整个代码,当我尝试它时它工作正常,正如您在上面的代码和框中看到的
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