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

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

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

export const Notification=（状态、消息）=>{
console.log（“状态-->”，状态）
如果（状态==“成功”）{
console.log（“success-->”，消息）
返回(
{message}
);
}else if（状态==“错误”）{
返回(
{message}
);
}否则{
返回空
}  
}

Home.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
        }  
}

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

从“../components/notificationBar”导入{Notification}；
常量Home=（）=>{
const notify=async（）=>{
通知（“成功”，“你赢了”）；
}
返回(
notify（）}>单击我
)
}
导出默认主页

您需要在根元素中定义放置此消息的区域，可以是react portal，这里您可以找到一个示例：

您需要在根元素中定义放置此消息的区域，可以是react portal，这里您可以找到一个示例：

当前，您正在从单击返回组件handler@DavinTryon是。我想在用户单击该按钮后显示我的警报当前，您正在通过单击返回组件handler@DavinTryon是。我想在用户单击该按钮后显示我的警报