Material-ui реагирует на систему уведомлений без Context - PullRequest
0 голосов
/ 04 ноября 2019

Я хочу иметь компонент уведомлений, который будет помещен в корень верхнего уровня приложения. Поскольку я использую 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?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...