如何在屏幕加載時首先加載模態

Question

我有一個名為Modal.js一個模態分量，並呼吁Apps.js主要頁面組件。 我想要實現的是，當我導航到Apps.js ，如何modal box in modal.js加載modal box in modal.js 。 即我想先在我的Apps.js組件中調用Apps.js組件。 一旦任何用戶嘗試加載頁面Apps.js ，模式框應該觸發並彈出。 我如何實現這一目標？

PS：React的新手

Modal.Js

function Transition(props) {
   return <Slide direction="up" {...props} />;
}

export default class AlertDialogSlide extends React.Component {

   state = {
      open: false,
   };

   handleClose = () => {
      this.setState({ open: false });
   };

   render() {
      return (
         <div>
            <Dialog
               open={this.state.open}
               TransitionComponent={Transition}
               keepMounted
               onClose={this.handleClose}
               aria-labelledby="alert-dialog-slide-title"
               aria-describedby="alert-dialog-slide-description"
            >
               <DialogTitle id="alert-dialog-slide-title">

               </DialogTitle>
               <DialogContent>
               </DialogContent>

            </Dialog>
         </div>
      );
   }
}

Apps.JS

class Carts extends Component {

 componentDidMount(){

 }

圖片

Answer 1

你可以通過道具傳遞你的開放狀態。

您可以在模式文件中執行以下代碼：

componentDidMount () {
    this.setState({open: this.props.modalOpen})
}

然后進入你的App.js或其他文件，你只需：

<AlertDialogSlide modalOpen={true} />