React Material UI Modal - Нет доступа от родителя

Question

Я пытаюсь создать модальный компонент, который можно «открыть» с помощью разных реквизитов.Все работает нормально (отправка реквизита), за одним исключением.

Я не могу открыть модель от родителя .... Если я использую кнопку Child (модальная), она работает нормально, если я пытаюсь использоватьродительская кнопка я ничего не могу сделать.Вот этот модал -> https://material -ui.com / utils / modal /

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

Вот как это выглядит.

Модальный (дочерний) компонент ->

            <Modal
                aria-labelledby="simple-modal-title"
                aria-describedby="simple-modal-description"
                open={this.props.open}
                onClose={this.handleClose}
            >

И из моего родительского компонента (сообщения на странице) я пробовал это ->

                <Modal modalTitle={post.acf.title} open={this.state.modalOpen}/>

Я определил состояние в моем родителе как modalopen: false, но я всегда получаю ошибку намодальное изречение, что опора не определена, ЕСЛИ МЕНЬШЕ добавлю также

PortModal.defaultProps = { open: false, }

Если я проверю в React DevTools, я вижу, что мои модалы были созданы с помощью open={false}, а также они отправляютназвание мода (которое работает).

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

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

Заранее спасибо.

Обновление с большим количеством кода и рисунка.

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

В componentDidMount

const MyModal = <Modal modalTitle={this.state.title} open={this.state.modalOpen} openHandler={this.handleOpen}/>
        this.setState({
            MyModal
        });

В render() я просто возвращаю эту константу.

const { MyModal } = this.state;
<div>
   {MyModal}
</div>

И мой мод выглядит так ->

  <div>
    <Typography gutterBottom>Click to get the full Modal experience!</Typography>
    <Button onClick={this.props.openHandler}>Open Modal</Button>
    <Modal
      aria-labelledby="simple-modal-title"
      aria-describedby="simple-modal-description"
      open={this.props.open}
      onClose={this.props.closeHandler}
    >
      <div style={getModalStyle()} className={classes.paper}>
        <Typography variant="title" id="modal-title">
          Text in a modal
        </Typography>
        <Typography variant="subheading" id="simple-modal-description">
          Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
        </Typography>
        <PortModalWrapped />
      </div>
    </Modal>
  </div>

Так что это в значительной степени карта по умолчанию из ссылки выше.

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

<Button size="small" color="primary" onClick={openModal(post.acf.title)}>

И функция

const openModal = (title) => {
    this.setState({
        title: title,
        openModal: true,
    });
};

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

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