如何从每个页面中导航栏组件的按钮打开模式/对话框反应

Question

当我单击 topnav 组件中的图标以打开模态时，模态未打开，但控制台记录了“模态打开”文本。 Top nav 组件在主页中具有固定高度。我需要能够在每个页面中打开此模式，这就是我将其添加到导航栏的原因。

顶部导航组件

export default function Topnav({ page }) {
  const [show, setShow] = useState(false);
  return (
    <nav className="top-nav">
        <icon className='btn' onClick={() => {setShow(!show)}}>
          <VscOrganization size={20} />
        </icon>
      <h4 className="title">{page}</h4>
      
     <Modal show={show}/>
    </nav>
  );
}

模态

function Modal({ show }) {
  const classes= useStyles();
  const [open, setOpen] = useState(show);
  const [modalStyle] = useState(getModalStyle);

  return (
    <div>
      <Modal open={open} onClose={() => setOpen(false)}>
        <div style={modalStyle} className={classes.paper + " modal"}>
          <div>
            this is the modal text
            {console.log('modal open')}
          </div>
        </div>
      </Modal>
    </div>
  );
}

Answer 1

在 Topnav 组件中，您只需要一个即可，而不是使用打开和关闭两种状态。

我的意思是：

Topnav 组件：将 onClose 添加到模态

export default function Topnav({ page }) {
  const [show, setShow] = useState(false);
  return (
    <nav className="top-nav">
        <icon className='btn' onClick={() => {setShow(true)}}>
          <VscOrganization size={20} />
        </icon>
      <h4 className="title">{page}</h4>
      
     <Modal show={show} onClose={() => setShow(false)}/>
    </nav>
  );
}

模态：删除 open 状态，只使用道具

function Modal({ show, onClose }) {
  const classes= useStyles();
  const [modalStyle] = useState(getModalStyle);

  return (
    <div>
      <Modal open={show} onClose={onClose}>
        <div style={modalStyle} className={classes.paper + " modal"}>
          <div>
            this is the modal text
            {console.log('modal open')}
          </div>
        </div>
      </Modal>
    </div>
  );
}

如何从每个页面中导航栏组件的按钮打开模式/对话框反应

How do I open a modal/ dialog from a button from nav bar component in every page react

javascript

modal-dialog

reactjs

react-component