Блог

Я пытаюсь использовать компонент глобального оповещения для моего приложения NextJS.Затем я могу импортировать этот компонент и использовать его везде, где захочу. Ниже приведен мой компонент уведомлений и место, которое я пытаюсь использовать.Он показывает журналы консоли, но не показывает предупреждение.

notificationBar.js

 export const Notification = (status, message) => {
   
        console.log("status -->", status)
        if (status === "success") {
            console.log("success --->", message)
            return (
                <div className="alert alert-success">{message}</div>
            );
        } else if (status === "error") {
            return (
                <div className="alert alert-danger">{message}</div>
            );
        } else {
            return null
        }  
}
  

Home.js

 import  {Notification}  from '../components/notificationBar';

const Home = () => {

 const notify = async ()=>{
         Notification("success", "you have won");
    }

return(
 <div>
  <button onClick={()=>notify()}>Click me</button>
 </div>
 )
}

export default Home
  

Вам нужно определить в корневом элементе область, куда помещать эти сообщения, это может быть портал react, здесь вы можете найти пример: https://github.com/vercel/next.js/tree/canary/examples/with-portals