IonModal не открывается с реакции-роутером - PullRequest
Новая
       25

IonModal не открывается с реакции-роутером

0 голосов
/ 25 апреля 2019

Я создаю компонент Dialog, который должен изменять URL-адрес при его открытии (например, базовый URL-адрес - / fruits, а когда я нажимаю банановую кнопку, компонент Dialog будет отображаться, а путь будет /fruits/banana).

Я использую ionic с реагировать и реагировать маршрутизатор, чтобы сделать это. Компонент диалога содержит ион-модал.

Моя проблема в том, что модальное окно не открывается, но я вижу в devTools, что состояние модального окна (show) установлено в true. Когда я устанавливаю состояние непосредственно из devTool в false, оно выдает исключение: 

createOverlayComponent.js:125 Uncaught (in promise) TypeError: Cannot read property 'dismiss' of undefined
    at ReactControllerComponent._callee$ (createOverlayComponent.js:125)
    at tryCatch (runtime.js:45)
    at Generator.invoke [as _invoke] (runtime.js:264)
    at Generator.prototype.(anonymous function) [as next] (http://localhost:3000/static/js/10.chunk.js:52661:21)
    at createOverlayComponent.js:33
    at new Promise (<anonymous>)
    at push../node_modules/@ionic/react/dist/components/createOverlayComponent.js.__awaiter (createOverlayComponent.js:10)
    at ReactControllerComponent.componentDidUpdate (createOverlayComponent.js:80)
    at commitLifeCycles (react-dom.development.js:18130)
    at commitAllLifeCycles (react-dom.development.js:19674)
    at HTMLUnknownElement.callCallback (react-dom.development.js:147)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:196)
    at invokeGuardedCallback (react-dom.development.js:250)
    at commitRoot (react-dom.development.js:19898)
    at react-dom.development.js:21446
    at Object.unstable_runWithPriority (scheduler.development.js:255)
    at completeRoot (react-dom.development.js:21445)
    at performWorkOnRoot (react-dom.development.js:21368)
    at performWork (react-dom.development.js:21273)
    at performSyncWork (react-dom.development.js:21247)
    at requestWork (react-dom.development.js:21102)
    at scheduleWork (react-dom.development.js:20915)
    at overrideProps (react-dom.development.js:21760)
    at e.value (backend.js:1)
    at backend.js:1
    at Array.forEach (<anonymous>)
    at backend.js:1
    at Array.forEach (<anonymous>)
    at t.value (backend.js:1)
    at e (backend.js:1)

но потом, когда я установил значение true вручную, это работает (и теперь false также работает, когда я пытаюсь снова).

Компонент приложения: 

import React, { useState } from 'react';
import '@ionic/core/css/core.css';
import '@ionic/core/css/ionic.bundle.css';
import Dialog from './components/dialog';
import { IonButton } from '@ionic/react';
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

export default () => {
  const [showParent, setShowParent] = useState(0);

  const onDidDismiss = (data) => {
    console.log(data);
  }


  const Modal = () => (
    <Dialog show={showParent} onDidDismiss={(data) => onDidDismiss(data)}>
      <span>first dialog</span>
    </Dialog>
  );

  return (
    <Router>
      <div>
        <IonButton>
          <Link to="/dialog" onClick={() => { setShowParent(true); console.log("check") }}>
            click !
          </Link>
        </IonButton>
        <Switch>
          <Route path='/dialog' component={Modal} />
        </Switch>
      </div>
    </Router>
  );
};

Компонент Dialog: 

import React from 'react'
import { IonModal } from '@ionic/react';

export default ({ show, onDidDismiss, height, width, children } = {}) => {
    const style = {
        height,
        width
    }

    return (
        <IonModal style={style}
            isOpen={show}
            onDidDismiss={(data) => {onDidDismiss(data); console.log("dialog check")}}
        >
            <div>
                {children}
            </div>
        </IonModal>
    );
}

Почему это происходит? Может быть, что-то с present ()?

...