Question

我正在尝试为我的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

Answer 1

您需要在根元素中定义放置此消息的区域，该区域可以是react门户，您可以在此处找到示例：https://github.com/vercel/next.js/tree/canary/examples/with-portals

从另一个文件调用功能性UI组件-NextJs

1 个答案: