Блог

У меня есть приложение ReactJS с 4 экранами/компонентами. Каждый экран может быть связан с другим.

Я хочу использовать модалы для отображения содержимого каждого экрана, таким образом, я не потеряю состояние текущего экрана.

На данный момент я просто устанавливаю модальность на своем 1-м компоненте :

 <Modal show={this.state.show}
       ref={this.ModalGlobal}
       onHide={() => this.setState({show: false})}
>
    <Modal.Body>
        {this.state.id amp;amp;
        <MyComponentB id={this.state.id} />
        }
    </Modal.Body>
</Modal>
 

В моем компоненте B я хочу открыть один и тот же модальный файл с другим идентификатором.

Я пытался использовать ссылки, но я не знаю, что с этим делать в моем компоненте B ?

Нравится :

 this.ModalGlobal.current.destroy 
 

Должен ли я использовать Redux или это можно сделать с помощью контекстов или другого решения ?

Вместо того, чтобы один модал закрывал другой и открывал его, можно ли было бы вместо этого, чтобы модал обновлял свое собственное содержимое на основе идентификатора? Вы можете создать оболочку для модала, которая обновит тело модала в зависимости от текущего идентификатора. Что-то вроде этого:

 const MyModal = ({id}) => {
  const [modalPage, setModalPage] = useState(id);
  const [modalIsOpen, setModalIsOpen] = useState(false);

  useEffect(() => {
    setModalPage(id)
  }, [id]);

  const openModal = async () => {
    setModalIsOpen(true);
    document.body.style.overflowY = "hidden";
  }

  const closeModal = () => {
    setModalIsOpen(false);
    document.body.style.overflowY = "";
  }

  const modalPages = {
    'welcome': <WelcomeComponent setModalPage />,
    'products': <ProductsComponent setModalPage />,
    'contact': <ContactComponent setModalPage />
  }

  const content = modalPages[modalPage];

  return (
    <Modal
      isOpen={modalIsOpen}
      onRequestClose={closeModal}
      className="react-modal"
      overlayClassName="react-modal-overlay"
    >
      {content}
    </Modal>
  );
}