我如何在不使用 onClick 按钮的情况下使 react toastify 出现?它应该在页面加载后出现
how do i make to appear the react toastify without using onClick button? it should appear once the page loads
我展示的代码是一个带有 onClick 按钮和自定义自动关闭设置时间 1 分钟的 react toastify 库。我想在不使用按钮的情况下使用库,但是当页面加载时有人可以帮助我如何实现吗?
import React, { useRef, useEffect } from "react";
import * as tf from "@tensorflow/tfjs";
import Webcam from "react-webcam";
import { toast, ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
toast.configure();
function AppMain() {
const notify = () => toast("Fetching the Model Do not Close", {
position: toast.POSITION.TOP_CENTER,
autoClose: 60000});
const webcamRef = useRef(null);
};
return (
<div id="main" className="mainBlock">
<div className="toasterbutton">
<button onClick={notify}>Load Model</button>
<ToastContainer />
</div>
<div id="caption"></div>
<header style="margin-top:-2.5 rem;" className="container-fluid">
<Webcam
ref={webcamRef}
audio={false}
muted={true}
style={{
position: "absolute",
marginLeft: "auto",
marginRight: "auto",
left: 0,
right: 0,
textAlign: "center",
zindex: 9,
width: 640,
height: 480,
}}
/>
</header>
</div>
);
}
export default AppMain;
尝试将函数调用和 the function itself 放在一个 useEffect
中,它只会 运行 挂载。
function AppMain() {
const [show, hide] = useState(true);
useEffect(() => {
const notify = () => toast("Fetching the Model Do not Close", {
position: toast.POSITION.TOP_CENTER,
autoClose: 60000
});
notify();
}, [])
很好的解释了useEffect依赖数组
我展示的代码是一个带有 onClick 按钮和自定义自动关闭设置时间 1 分钟的 react toastify 库。我想在不使用按钮的情况下使用库,但是当页面加载时有人可以帮助我如何实现吗?
import React, { useRef, useEffect } from "react";
import * as tf from "@tensorflow/tfjs";
import Webcam from "react-webcam";
import { toast, ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
toast.configure();
function AppMain() {
const notify = () => toast("Fetching the Model Do not Close", {
position: toast.POSITION.TOP_CENTER,
autoClose: 60000});
const webcamRef = useRef(null);
};
return (
<div id="main" className="mainBlock">
<div className="toasterbutton">
<button onClick={notify}>Load Model</button>
<ToastContainer />
</div>
<div id="caption"></div>
<header style="margin-top:-2.5 rem;" className="container-fluid">
<Webcam
ref={webcamRef}
audio={false}
muted={true}
style={{
position: "absolute",
marginLeft: "auto",
marginRight: "auto",
left: 0,
right: 0,
textAlign: "center",
zindex: 9,
width: 640,
height: 480,
}}
/>
</header>
</div>
);
}
export default AppMain;
尝试将函数调用和 the function itself 放在一个 useEffect
中,它只会 运行 挂载。
function AppMain() {
const [show, hide] = useState(true);
useEffect(() => {
const notify = () => toast("Fetching the Model Do not Close", {
position: toast.POSITION.TOP_CENTER,
autoClose: 60000
});
notify();
}, [])