Блог

Я хочу вызвать модальное событие из дочернего компонента. Обычно я передаю состояние в виде <Children handleOpen={HandleOpen} /> . Если кнопка нажата в дочернем компоненте, событие внутри родителя должно быть запущено и показать текст от дочерних элементов. Как я могу понять, что если {children} используется?

app.js

 const App = () => {
  return (
      <Router>
        <div>
          <Switch>
          <PrivateRoute exact path="/children1" component={children1} layout={basic} />
          <PrivateRoute exact path="/children2" component={children2} layout={basic} />
          </Switch>
        </div>
      </Router>
  );
}
 

Оболочка макета/Родительская/Базовая

 const Basic = ({children}) => {
    //Modal
    const [open, setOpen] = React.useState(false);
    const handleOpen = () => setOpen(true);
    const handleClose = () => setOpen(false);

    return (
      <div className="App">
        //Insert Children Component
        {children}

        //Show this Modal when called from children/with sent data
        <Modal open={open} onClose={handleClose}>
         <Box>
          data xxx from child
         </Box>
        </Modal>
      </div>
    );
  };
 

дети 1 и дети 2

 const children1 = ( { handleOpen }) => {
    return (
      <div>
        <button onClick={handleOpen} data={xxx}>Open Modal with xxx Text</button>
      </div>
    );
  };