Я хочу иметь компонент уведомлений, который будет помещен в корень верхнего уровня приложения. Поскольку я использую material-ui Snackbar
, требуется изменить open
реквизит компонента, который может быть предоставлен из состояния. Я хочу разместить компонент один раз и использовать какой-то метод уведомления, который будет экспортироваться и использоваться при необходимости. На данный момент я решил это с useContext
, но я не думаю, что это хорошее решение:
import React, { createContext, useState, useContext } from 'react';
import Notification from './Snackbar';
const NotificationContext = createContext();
export default props => {
const [message, setMessage] = useState(null);
const [opened, setOpened] = useState(false);
const notificate = ({message}) => {
setMessage(message);
setOpened(true);
}
const close = () => {
setMessage(null);
setOpened(false);
};
const { children } = props;
return (
<NotificationContext.Provider
value={{
notificate
}}
{...props}
>
<Snackbar
open={opened}
message={message}
onClose={close}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'left'
}}
autoHideDuration={4000}
/>
{children}
</NotificationContext.Provider>
);
};
export const useNotification = () => useContext(NotificationContext);
Есть предложения, чтобы решить это? Можно ли это решить и с помощью Error Boundry?