Модал для роутера React? - PullRequest
Новая
       0

Модал для роутера React?

0 голосов
/ 03 марта 2020

Я только что узнал, что модалы и React Router DOM не так легко работают вместе. Я перепробовал множество разных решений, но ни одно из них не сработало.

Вот фрагмент кода моей домашней страницы: 

import { BrowserRouter, Switch, Route, Link } from "react-router-dom";

import AddBtn from "../layout/AddBtn";
import AddTaskModal from "../tasks/AddTaskModal";
import EditTaskModal from "../tasks/EditTaskModal";

<Fragment>
      <SearchBar />
      <div className="container">
        <AddBtn />
        <AddTaskModal />
        <EditTaskModal />
          </Fragment>

, когда страница загружается при первой работе модалов. Когда я изменяю страницу (например, / about) с помощью Router, то я go возвращаюсь домой и модалы больше не работают.

Кто-то знает почему? Спасибо!

1 Ответ

2 голосов
/ 03 марта 2020

Вы можете использовать ReactDOM.createPortal. Порталы - это способы визуализации элементов вне иерархии компонентов. Ниже приведен пример использования портала для построения модального пространства: 


import React from 'react';
import ReactDom from 'react-dom';

const Modal = props => {
    return ReactDom.createPortal(
        <div
            onClick={props.onDismiss}
            className="ui dimmer modals visible active"
        >
            <div onClick={(e) => e.stopPropagation()} className="ui standard modal visible active">
                <div className="header">{props.title}</div>
                <div className="content">
                    {props.content}
                </div>
                <div className="actions">
                    {props.actions}
                </div>
            </div>
        </div>,
        document.querySelector('#modal')
    );
};

export default Modal;

И, по индексу. html: 


  <body>
    <div id="root"></div>
    <div id="modal"></div>
  </body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...