добавить материал пользовательского интерфейса закусочной к телу

Question

У меня есть компонент, который виден только тогда, когда пользователь наводит на него курсор. В этом компоненте у меня есть кнопка, которая позволяет пользователю добавлять что-то в локальное хранилище. Если нажать кнопку, компонент удаляется из DOM. Это нормально работает, но я хочу показать пользователю тост после завершения действия. Проблема в том, что тост также удаляется при нажатии кнопки, потому что он является частью этого компонента:

return (
  <React.Fragment>
    <Overlay backdrop_path={movie.backdrop_path}>
      <div>
        <AddMovie onClick={() => addMovie(movie)}>Add movie to your watchlist</AddMovie>
      </div>
    </Overlay>
    <Snackbar
      open={open}
      onClose={handleClose}
      TransitionComponent={Slide}
      message="Movie has been added"
    />
  </React.Fragment>
)

Я бы предпочел не помещать тост Snackbar в другой компонент, потому что этот компонент отвечает за добавление a mov ie в локальное хранилище, и я не хочу делать много реквизитов, поднимающих et c, чтобы получить результат.

Итак, я подумал, может быть, можно добавить Snackbar элемент к телу вместо элемента компонентов. Таким образом, если элемент компонентов удален, Snackbar все еще должен быть виден. Не уверен, что этот logi c действительно будет работать.

Можно ли добавить элемент / компонент в другую часть структуры DOM, если да: как?

Answer 1

Кажется, добавить визуализированные элементы к другим элементам DOM несложно:

return ReactDOM.createPortal(
  <Snackbar
    open={true}
    onClose={handleClose}
    TransitionComponent={Slide}
    message="Movie has been added"
  />,
  document.body
);

Но этот элемент также удаляется, как только компонент, который его визуализирует, удаляется. В этом есть смысл. Похоже, мне нужно отобразить Snackbar в другом элементе. Позор.

// редактировать. Используя Redux, можно создать глобальное состояние для использования элементов Snackbar> https://browntreelabs.com/snackbars-in-react-redux-and-material-ui/

// edit # 2. https://github.com/iamhosseindhv/notistack этот пакет значительно упрощает задачу и поддерживается командой Material UI.