Javascript 如何从父组件打开材质UI模式？

这是我的父组件：

import React from 'react';
import ChildModal from 'ChildModal';

const ParentComponent = () => (
  <div>
    <span>Click </span>
    <a>HERE TO OPEN MODAL</a>
  <div>
);

import React, { useState } from "react";
import { Modal, Backdrop, Fade } from "@material-ui/core";

const ChildModal = () => {
  const [open, setOpen] = useState(false);

  const handleOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <div>
      <button type="button" onClick={handleOpen}>
        react-transition-group
      </button>
      <Modal
        aria-labelledby="transition-modal-title"
        aria-describedby="transition-modal-description"
        className="modal"
        open={open}
        onClose={handleClose}
        closeAfterTransition
        BackdropComponent={Backdrop}
        BackdropProps={{
          timeout: 500
        }}
      >
        <Fade in={open}>
          <div className="paper">
            <h2 id="transition-modal-title">Transition modal</h2>
            <p id="transition-modal-description">
              react-transition-group animates me.
            </p>
          </div>
        </Fade>
      </Modal>
    </div>
  );
};

从“React”导入React；
从“ChildModal”导入ChildModal；
常量ParentComponent=（）=>(
点击
在这里打开MODAL
);

这是我的子组件：

import React from 'react';
import ChildModal from 'ChildModal';

const ParentComponent = () => (
  <div>
    <span>Click </span>
    <a>HERE TO OPEN MODAL</a>
  <div>
);

import React, { useState } from "react";
import { Modal, Backdrop, Fade } from "@material-ui/core";

const ChildModal = () => {
  const [open, setOpen] = useState(false);

  const handleOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <div>
      <button type="button" onClick={handleOpen}>
        react-transition-group
      </button>
      <Modal
        aria-labelledby="transition-modal-title"
        aria-describedby="transition-modal-description"
        className="modal"
        open={open}
        onClose={handleClose}
        closeAfterTransition
        BackdropComponent={Backdrop}
        BackdropProps={{
          timeout: 500
        }}
      >
        <Fade in={open}>
          <div className="paper">
            <h2 id="transition-modal-title">Transition modal</h2>
            <p id="transition-modal-description">
              react-transition-group animates me.
            </p>
          </div>
        </Fade>
      </Modal>
    </div>
  );
};

import React，{useState}来自“React”；
从“@material ui/core”导入{model，background，Fade}”；
常量ChildModal=（）=>{
const[open，setOpen]=useState（false）；
const handleOpen=（）=>{
setOpen（真）；
};
常量handleClose=（）=>{
setOpen（假）；
};
返回(
反应过渡基团
过渡模态

反应过渡组动画我。

);
};

所以，基本上，我如何从父组件打开模态？ 我应该在其他事情中传递道具或手柄

open

状态吗

另外，是否可以使用

标记来完成此操作？我需要用它来保持一致，这不是真实的场景，但你会明白的

谢谢。
从“React”导入React；
import React from 'react';
import ChildModal from 'ChildModal';

const ParentComponent = () => {
    const [open, setOpen] = useState(false);
    return (
        <div>
            <span>Click </span>
            <a onClick={ (e)=> { e.preventDefault();setOpen(true); } }>HERE TO OPEN MODAL</a>
            <ChildModal setModalOpen={setOpen} modalState={open} />
        <div>
    )
}

从“ChildModal”导入ChildModal；
常量ParentComponent=（）=>{
const[open，setOpen]=useState（false）；
返回(
点击
{e.preventDefault（）；setOpen（true）；}}>在此处打开
)
}

子模态

import React, { useState } from "react";
import { Modal, Backdrop, Fade } from "@material-ui/core";

const ChildModal = (props) => {

return (
    <div>
    <button type="button" onClick={ props.setModalOpen(true) }>
        react-transition-group
    </button>
    <Modal
        aria-labelledby="transition-modal-title"
        aria-describedby="transition-modal-description"
        className="modal"
        open={ props.modalState }
        onClose={ props.setModalOpen(false) }
        closeAfterTransition
        BackdropComponent={Backdrop}
        BackdropProps={{
        timeout: 500
        }}
    >
        <Fade in={ props.modalState }>
        <div className="paper">
            <h2 id="transition-modal-title">Transition modal</h2>
            <p id="transition-modal-description">
            react-transition-group animates me.
            </p>
        </div>
        </Fade>
    </Modal>
    </div>
);
};

import React，{useState}来自“React”；
从“@material ui/core”导入{model，background，Fade}”；
const ChildModal=（道具）=>{
返回(
反应过渡基团
过渡模态

反应过渡组动画我。

);
};
从“React”导入React；
从“ChildModal”导入ChildModal；
常量ParentComponent=（）=>(
const[open，setOpen]=useState（false）；
const handleOpen=（）=>{
setOpen（真）；
};
常量handleClose=（）=>{
setOpen（假）；
};
返回(
单击此处打开MODAL
在父组件中维护您的状态，并将函数切换到父组件，并将这两个参数传递给子组件。Hi@PrabhatMishra，请写下答案，以便我可以将其标记为正确。发布答案，请查看。请检查我的评论。确定，但如何关闭模式？
this.props.setModalOpen（false）
将
关闭
模式
和
this.props.setModalOpen（true）
will
open
the
modal
。您也可以写
ChildModal
吗？我收到这条消息
react dom.development.js:12212 Uncaught TypeError:setModalOpen不是一个函数
在
onClose
所在的行。这里的
modalState
是什么？在父组件中，打开并设置打开