已关闭。此问题需要details or clarity。当前不接受答案。
**想要改进此问题吗？**通过editing this post添加详细信息并阐明问题。

13天前关闭。
Improve this question
我想为我的Next.js页面创建一个全局消息组件。
这就是我想要呈现组件的方式，只有一行，这样我就可以在我的应用程序中使用它。通过此调用，组件应该呈现。我不希望在每个特定页面的呈现部分加载组件。
呼叫来自一个页面：

import { MessageComponent } from '/components/message'
...
useEffect(() => { // 5000 for auto-hide message after 5 seconds
  setMessage('hello world!', 5000, ..other properties)
}

组件本身。snackbar来自Material UI。我使用了一个组件，以便将来可以更改实现。

export function MessageComponent({ message, autoHideDuration = 6000, severity = 'info', position = { vertical: 'bottom', horizontal: 'left', } }: MessageComponentProps {
...
return(
    <Snackbar
     anchorOrigin={{ vertical: position.vertical, horizontal: position.horizontal }}
      open={open}
      autoHideDuration={6000}
      action={action}
      >
          <Alert onClose={handleClose} severity="severity">
               {message}
          </Alert>
    </Snackbar>
 )
}

我如何在一个Next.js/Reactjs应用程序中实现它？我尝试了useContext和useRef。我不清楚如何实现它，也不清楚useContext是否是正确的方法。
(Yes我知道有NPM包谁提供这一点，但我想管理我自己的看法）。